1

if I have two dropdowns such as:

<select>
<option value="option1">option 1</option>
<option value="option2">option 2</option>
<option value="option3">option 3</option>
</select>

followed by:

<select>
<option value="option5">option 5</option>
<option value="option8">option 8</option>
<option value="option9">option 9</option>
</select>

how can i make it so that if from the first dropdown someone selects option 2 that only option 9 is available from the second dropdown? I was told i would need to store the values but am a bit lost on all this?

Thanks for any help.

John

4

4 に答える 4

2

Proof: http://jsfiddle.net/iambriansreed/VLvYA/

Disabled as requested and also auto selects option.

$('#first-select').change(function(){
    $('#second-select option').prop('disabled',false);
    if(this.value == 'option2')
        $('#second-select option:not([value="option9"])')
            .prop('disabled',true).parent().val('option9');

});​
于 2012-05-04T15:13:16.663 に答える
0

I am assuming that you want to remove 2nd drop down options based on the option selected index from drop down 1.

EDIT: Removed extra clone that was not required.

DEMO

$(function () {
    var $dd2Opt = $('#dd2 option').clone();
    var $dd2 = $('#dd2');
    $('#dd1').change(function () {
        $dd2.empty().append($dd2Opt.slice(this.selectedIndex + 1));
    });
});

HTML

<select id="dd1">
  <option value="option1">option 1</option>
  <option value="option2">option 2</option>
  <option value="option3">option 3</option>
</select>

<select id="dd2">
  <option value="option5">option 5</option>
  <option value="option8">option 8</option>
  <option value="option9">option 9</option>
</select>
于 2012-05-04T15:14:37.417 に答える
-1 
var opts = $('select.second option');
$('select:first').on('change',function() {
  if(this.value == 'option2') {
     $(this).next('select.second').empty().append(opts[this.selectedIndex + 1]).change();
  } else {
    $(this).next('select.second').empty().append(opts).change();
  }
})

HTML

<select>
<option value="option1">option 1</option>
<option value="option2">option 2</option>
<option value="option3">option 3</option>
</select>
<select class="second">
<option value="option5">option 5</option>
<option value="option8">option 8</option>
<option value="option9">option 9</option>
</select>

Live Proof

于 2012-05-04T15:19:30.753 に答える
-2 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#mainSelect').live('change', function () {
                $('#subSelect option').hide();
                $('#subSelect option[data-option="' + $(this).val() + '"]').show();
                $('#subSelect option:visible:first').attr('selected', true);
            });

            $('#mainSelect').trigger('change');
        });
    </script>
</head>
<body>
    <select id="mainSelect">
        <option value="option1">option 1</option>
        <option value="option2">option 2</option>
        <option value="option3">option 3</option>
    </select>
    <select id="subSelect">
        <option value="option5" data-option="option1">option 5</option>
        <option value="option8" data-option="option3">option 8</option>
        <option value="option9" data-option="option2">option 9</option>
    </select>
</body>
</html>
于 2012-05-04T15:18:20.500 に答える