動的にJqueryでドロップダウンを選択します。

Question

4つのドロップダウンがあります。

デフォルトでは、各ドロップは - 選択 - オプションがあります。各ボックスには固有のIDがあります。ご覧のように、上記のドロップダウン値が--select--の場合、2番目のドロップダウンは無効になります。値が - 選択 -

以外のものがある場合にのみ有効になります。ここに私のコードです：私は値ダウン私の以前のドロップがあるときにのみ、次のドロップダウンを表示したい

$(document).ready(function() { 

$('#idOfTheFirstDropDown').bind('change', function() { 
    var options = $(this).children('option'); 
    var item = $('div.c-select').children().hide(); // hide all the elements 
    var value = Math.floor(Math.random() * options.length); 
    //console.log(value); 
    if (value.length) { // if selected 
     item.show(); // show the next dropdown 
    } 
}).trigger('change'); 
}); 

はない - -select--私のコードは最初のドロップダウンを取りますが、値を変更しません。私は間違って何をしていますか？ありがとう。

1つのドロップダウンボックスのHTML。残りの3つのIDの変更のみ。HTMLの残りは同じままです。

<div class="c-select"> 
<select name="list1" onchange="javascript:setTimeout('__doPostBack(\'list1\',\'\')', 0)" id="idOfTheFirstDropDown" class="GroupDD dropDown "> 
<option selected="selected" value="">-- Select --</option> 
<option value="1">Group1</option> 
</select> 
</div> 

Answer 1

これを確認してください。

HTMLコード：

<select id="sel-1"></select> 
<select id="sel-2"></select> 
<select id="sel-3"></select> 
<select id="sel-4"></select> 

JSコード：テキストが選択されたオプションは、他の場合にだけチェックするハンドラにvalを使用し、値を持たないよう'--select--'を持っているオプションを想定すると、

$(document).ready(function(){ 

    $("[id^=sel]").change(function(){ 

      /* 
      * find out the current box id 
      */ 

      var id=$(this).attr("id"); 
      /* 
      * find out the current box id order number 
      */ 

      var ordernumber=id.split("-")[1]; 

      if($(this).val()!="select") 
      { 
       //enable next one 
       $("#sel-"+(ordernumber+1)).show(); 
      } 
    }) 
}) 

Answer 2

空きよりも

Answer 3

オプションを隠すよりもむしろあなたがHTMLを提供することができればそれは容易になるだろう

var selects = $('.drop-down'); 
 
selects.not(':eq(0)').prop('disabled', true); // disable all but first drop down 
 

 
selects.on('change', function() { 
 
    var select = $(this), 
 
     currentIndex = selects.index(select), 
 
     nextIndex = currentIndex + 1; 
 
    
 
    // only do this if it is not last select 
 
    if (currentIndex != selects.length - 1) { 
 
    selects.slice(nextIndex)  // get all selects after current one 
 
      .val('')     // reset value 
 
      .prop('disabled', true); // disable 
 
    
 
    selects.eq(nextIndex).prop('disabled', select.val() === ''); // disable/enable next select based on val 
 
    } 
 
    
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="drop-down"> 
 
    <option value="">--Select--</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
</select><br> 
 
<select class="drop-down"> 
 
    <option value="">--Select--</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
</select><br> 
 
<select class="drop-down"> 
 
    <option value="">--Select--</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
</select><br> 
 
<select class="drop-down"> 
 
    <option value="">--Select--</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
</select>

Answer 4

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<style> 
 
    select { 
 
    margin: 5px 0; 
 
    display: block; 
 
    } 
 
</style> 
 
<script> 
 
    $(function() { 
 
    $('.cls-select').change(function() { 
 

 
     if ($(this).val() == '--select--') { 
 

 
     // reset and disable the next drop downs 
 
     $('.cls-select:gt(' + $('.cls-select').index($(this)) + ')').val('--select--').prop('disabled', true) 
 

 
     } else { 
 

 
     // current drop down has value so enable the next drop down 
 
     $(this).next().prop('disabled', false); 
 
     } 
 
    }); 
 
    }) 
 
</script> 
 

 
<select class="cls-select"> 
 
    <option>--select--</option> 
 
    <option>one</option> 
 
    <option>two</option> 
 
</select> 
 
<select class="cls-select" disabled> 
 
    <option>--select--</option> 
 
    <option>one</option> 
 
    <option>two</option> 
 
</select> 
 
<select class="cls-select" disabled> 
 
    <option>--select--</option> 
 
    <option>one</option> 
 
    <option>two</option> 
 
</select> 
 
<select class="cls-select" disabled> 
 
    <option>--select--</option> 
 
    <option>one</option> 
 
    <option>two</option> 
 
</select>