Question

I need some help with my jquery script.

I have two select boxes. When I select one options from firs select box the second box should show 3 items from all available options. The script doing it, but also showing me “additional” value at the top of the second select box.

Can someone tell me why?

Here is my HMTL code:

<select id="viewSelector" style="float: left;">
 <option value="0">-- Select a View --</option>       
 <option value="view1">W</option>
 <option value="view2">X</option>
 <option value="view3">Y</option>
 <option value="view4">Z</option>
</select>

<select id="viewSelect1">

 <option id="view1a">W1</option>
 <option id="view1b">W2</option> 
 <option id="view1c">W3</option>

 <option id="view2a">X1</option>
 <option id="view2b">X2</option> 
 <option id="view2c">X3</option>

 <option id="view3a">Y1</option>
 <option id="view3b">Y2</option> 
 <option id="view3c">Y3</option>

 <option id="view4a">Z1</option>
 <option id="view4b">Z2</option> 
 <option id="view4c">Z3</option>

</select>

Here is my jQuery/JavaScript:

$(document).ready(function() {
  $.viewMap = {
    '0' : $([]),
    'view1' : $('#view1a, #view1b, #view1c'),
    'view2' : $('#view2a, #view2b, #view2c'),
    'view3' : $('#view3a, #view3b, #view3c'),
    'view4' : $('#view4a, #view4b, #view4c'),
  };

  $.each($.viewMap, function() { this.hide(); });
    $('#viewSelect1').hide();

  $('#viewSelector').change(function() {
    // hide all
    $.each($.viewMap, function() { this.hide(); });
      $('#viewSelect1').hide();
    // show current
    $.viewMap[$(this).val()].show();
      $('#viewSelect1').show();
  });
});​

The working example you can find here: http://jsfiddle.net/amarcinkowski/Sg8Xf/9/

Answer 1

Simple get id of selected value and add attribute selected .

var id = $.viewMap[$(this).val()].attr("id");

$('#'+id).attr('selected', 'selected');

---

$(document).ready(function() {
  $.viewMap = {
    '0' : $([]),
    'view1' : $('#view1a, #view1b, #view1c'),
    'view2' : $('#view2a, #view2b, #view2c'),
    'view3' : $('#view3a, #view3b, #view3c'),
   'view4' : $('#view4a, #view4b, #view4c'),
};

$.each($.viewMap, function() { this.hide(); });
$('#viewSelect1').hide();

$('#viewSelector').change(function() {
// hide all
$.each($.viewMap, function() { this.hide(); });
  $('#viewSelect1').hide();
// show current
$.viewMap[$(this).val()].show();
  $('#viewSelect1').show();
  var id = $.viewMap[$(this).val()].attr("id");

  $('#'+id).attr('selected', 'selected');
});
});