views:

42937

answers:

8

My select box is the following

<Select id="mySelect" size="9" </Select>

thanks

EDIT: This answer was helpful with chaining...however (in IE) .val('whatever') did not select the option that was added. (I did use the same 'value' in both .append and .val)

$('#mySelect').find('option').remove().end().append('<option value="whatever">text</option>').val('whatever');

EDIT: Trying to get it to mimic this code. I use this whenever the page/form is reset. This select box is populated by a set of radio buttons. .focus() was closer but the option did not appear selected like it does with .selected= "true". Nothing wrong with my existing code...just trying to learn JQuery.

    var mySelect = document.getElementById('mySelect') ;
    mySelect.options.length = 0;
    mySelect.options[0] = new Option ("Foo (only choice)","Foo");
    mySelect.options[0].selected="true" ;

EDIT: selected answer was close to what I needed...this worked for me

$('#mySelect').children().remove().end().append('<option selected value="whatever">text</option>') ;

but both answers led me to my final solution..

+38  A: 
$('#mySelect')
    .find('option')
    .remove()
    .end()
    .append('<option value="whatever">text</option>')
    .val('whatever')
;
Matt
+2  A: 

Not sure exactly what you mean by "add one and select it", since it will be selected by default anyway. But, if you were to add more than one, it would make more sense. How about something like:

$('select').children().remove();
$('select').append('<option id="foo">foo</option>');
$('#foo').focus();

Response to "EDIT": Can you clarify what you mean by "This select box is populated by a set of radio buttons"? A <select> element cannot (legally) contain <input type="radio"> elements.

Bobby Jack
+1  A: 

Thanks to the answers I received I was able to create something like the following, which suits my needs. My question was somewhat ambiguous..thanks for following up...my final problem was solved by including "selected" in the option that I wanted selected.

HTML

<label>One<input  name="myRadio" type="radio" value="1"  /></label>
<label>Two<input name="myRadio"  type="radio" value="2" /></label>
<select id="mySelect" size="9"></select>

Javascript

$(function() {
 $('#mySelect').children().remove().end().append('<option selected value="One">One option</option>') ; // clear the select box, then add one option which is selected
 $("input[name='myRadio']").filter( "[value='1']" ).attr( "checked", "checked" ); // select radio button with value 1
  // bind click event to each radio button
 $("input[name='myRadio']").bind("click",
    function() {
     switch(this.value) {
       case "1":
        $('#mySelect').find('option').remove().end().append('<option selected value="One">One option</option>') ;
        break ;
       case "2":
        $('#mySelect').find('option').remove() ;
     var items = ["Item1", "Item2", "Item3"] ; // set locally for demo
     var options = '' ;
     for (var i = 0; i < items.length; i++) {
     if (i==0) { options += '<option selected value="' + items[i] + '">' + items[i] + '</option>'; }
     else {options += '<option value="' + items[i] + '">' + items[i] + '</option>';}
     }
     $('#mySelect').html(options);   // populate select box with array
      break ;
  } // Switch end
      } // bind function end
  ); // bind end
}); // Event listener end
CarolinaJay65
+1  A: 
$('#mySelect')
    .empty()
    .append('<option value="whatever">text</option>')
    .find('option:first')
    .attr("selected","selected")
;
Hayden Chambers
We are still using IE6 and this method did not work. However, it did work in FF 3.5.6
CarolinaJay65
A: 

Take a look at the jQuery Select plugin , I have been looking for something and found out this.

http://www.techiegyan.com/?p=130

With this plugin , you can write ;

$("#control").addOption( value , text );
Bahadir Cambel
I am wondering if there is a working download link for this jquery library.
Gaurav Sharma
+16  A: 
$('#mySelect').empty().append('<option selected="selected" value="whatever">text</option>');
Mahzilla
nice solution. This worked in IE6 and FF 3.5.6
CarolinaJay65
Just out of curiosity, is 'empty' faster than 'find'? Seems like it would be -- because the 'find' would use a selector and 'empty' would just brute force empty the element.
Dan Esparza
+4  A: 

I had a bug in IE7 (works fine in IE6) where using the above jQuery methods would clear the select in the DOM but not on screen. Using the IE Developer Toolbar I could confirm that the select had been cleared and had the new items, but visually the select still showed the old items - even though you could not select them.

The fix was to use standard DOM methods/properites (as the poster original had) to clear rather than jQuery - still using jQuery to add options.

$('#mySelect')[0].options.length = 0;
row1
thanks for the response. this is a nice addition to the post
CarolinaJay65
A: 

Not exactly what I wanted, more i used part code. Thanks

Alexandre Broggio - Brasil