• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 600
  • Last Modified:

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

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
WorknHardr
Asked:
WorknHardr
  • 6
  • 6
1 Solution
 
leakim971PluritechnicianCommented:
use :
                click: function () {
                         $("#form1 select").val("");

                     }
0
 
WorknHardrAuthor Commented:
That works too good, I need the first option to display in each dropdown. Sorry I didn't specify on original post ;)
0
 
leakim971PluritechnicianCommented:
and what did you get?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
WorknHardrAuthor Commented:
All selects have blank text area, but dropdown values show on dropdown open.
0
 
leakim971PluritechnicianCommented:
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
 
WorknHardrAuthor Commented:
Line one, all elements show text when click down arrow.
0
 
leakim971PluritechnicianCommented:
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
 
WorknHardrAuthor Commented:
How bout this: $("#form1 select").prop('selectedIndex', 0);
0
 
leakim971PluritechnicianCommented:
what is the difference?
0
 
WorknHardrAuthor Commented:
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
 
leakim971PluritechnicianCommented:
ok.
0
 
WorknHardrAuthor Commented:
Found answer myself
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 6
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now