Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

FireFox 33.0.3 and Input Type Select option:selected Not Working?

Posted on 2014-11-07
12
Medium Priority
?
585 Views
Last Modified: 2014-11-13
I need to 'reset' all the dropdowns on a form showing in Jquery-ui dialog.
The following code works with Chrome 38.0.2125.111 and IE 11.0.9600.17358 but NOT with FireFox 33.0.3...
I have two code examples and only use one and comment-out the other. Just wanted to show both...

[Jquery UI Dialog]
var $dialog = $('#myModal').dialog(
         {
             autoOpen: false,
             open: function (event, ui) {

             },
             close: function (event, ui) {
                 $('#form1 select option:first-child').attr('selected', 'selected');

                 $("#form1 select").each(function ()
                 {                     
                     $(this).find('option:first-child').attr("selected", "selected");
                 });
             },
             buttons: [
                 {
                     text: "Clear All",
                     width: "100",
                     click: function () {
                         $('select option:first-child').attr('selected', 'selected');

                         $("#form1 select").each(function () {
                             $(this).find('option:first-child').attr("selected", "selected");
                         });
                     }
                 }
             ]
         });

 <div id="myModal">
                <div>
                    <div>
                        <div>
                            <form id="form1">
                                <div class="form-group">
                                    <div class="col-sm-4">
                                        <label class="col-sm-3 control-label">Class</label>
                                        <select class="form-control" id="class" name="class">
                                            <option value="class">Any</option>
                                            <option value="class">Article</option>
                                            <option value="class">Conjunction</option>                                           
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-4">
                                        <label class="col-sm-3 control-label">Case</label>
                                        <select class="form-control" id="case" name="case">
                                            <option value="case">Any</option>
                                            <option value="case">Accusative</option>
                                            <option value="case">Dative</option>                                            
                                        </select>
                                    </div>
                                </div>
                           </form>
                        </div>
                    </div>
                </div>
            </div>

Open in new window

0
Comment
Question by:WorknHardr
  • 6
  • 6
12 Comments
 
LVL 83

Expert Comment

by:leakim971
ID: 40429650
use :
                click: function () {
                         $("#form1 select").val("");

                     }
0
 

Author Comment

by:WorknHardr
ID: 40429752
That works too good, I need the first option to display in each dropdown. Sorry I didn't specify on original post ;)
0
 
LVL 83

Expert Comment

by:leakim971
ID: 40429758
and what did you get?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:WorknHardr
ID: 40429761
All selects have blank text area, but dropdown values show on dropdown open.
0
 
LVL 83

Expert Comment

by:leakim971
ID: 40429770
which line is the blank area here ?
<select class="form-control" id="class" name="class">
                                            <option value="class">Any</option>
                                            <option value="class">Article</option>
                                            <option value="class">Conjunction</option>                                           
                                        </select>

Open in new window

0
 

Author Comment

by:WorknHardr
ID: 40429792
Line one, all elements show text when click down arrow.
0
 
LVL 83

Expert Comment

by:leakim971
ID: 40429795
I don't understand what you mean
I think you should open a new question and close this one as your initial requirement (resetting a dropdown) work fine in firefox now
0
 

Author Comment

by:WorknHardr
ID: 40429811
How bout this: $("#form1 select").prop('selectedIndex', 0);
0
 
LVL 83

Expert Comment

by:leakim971
ID: 40430013
what is the difference?
0
 

Accepted Solution

by:
WorknHardr earned 0 total points
ID: 40430175
Since jquery 1.6 prop (property) and attr (attribute) are divided and no longer in the same attr object. I changed my original code to use prop and now it works in Firefox too.
0
 
LVL 83

Expert Comment

by:leakim971
ID: 40430199
ok.
0
 

Author Closing Comment

by:WorknHardr
ID: 40439492
Found answer myself
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

926 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question