Solved

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

Posted on 2014-11-07
12
497 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 82

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 82

Expert Comment

by:leakim971
ID: 40429758
and what did you get?
0
 

Author Comment

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

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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 82

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 82

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 82

Expert Comment

by:leakim971
ID: 40430199
ok.
0
 

Author Closing Comment

by:WorknHardr
ID: 40439492
Found answer myself
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
dynamics crm 2011 - Web Resources 1 24
Where to begin studying? 5 64
get radio button vale in array 7 36
ajax form sumbit 3 22
Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
The viewer will learn how to dynamically set the form action using jQuery.
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)

708 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now