基於選擇的選項啓用/禁用選擇框

我試圖啓用/禁用2選擇框基於使用jQuery第三個框（控制器）上作出的選擇。我想要實現的是，當用戶選擇控制器上的前2個選項中的任何一個時，選擇框2將啓用，當用戶選擇任何最後2個選項時，將禁用選擇框2並啓用選擇框3 。如果用戶返回他們的選擇，這應該再次啓用選擇框2並禁用選擇框3，但是它不會。基於選擇的選項啓用/禁用選擇框

我的代碼在第一次迭代中完美運行，但如果用戶返回，則無論他的選擇是什麼，這兩個框都保持禁用狀態。

這裏的片段

$(function() { //document ready 
 

 
    $('#mySelect').change(function() { 
 
     if ($('#mySelect :selected').data('type') <= 2) { // if user selects the first 2 items 
 
      if ($('#mySelect2 :selected').text() == "Disabled") { //if selection 2 text is Disabled 
 
        $('#mySelect2 :selected').text('Select Option'); // replace text with Select Option 
 
        $('#mySelect2').removeAttr('disabled'); //remove disabled attribute from select box 
 
      }; 
 
      $('#mySelect').change(function() { 
 
       if ($('#mySelect :selected').data('type') > 2) { 
 
         $('#mySelect2').prop('selectedIndex', 0); 
 
         $('#mySelect2').attr('disabled', true); 
 
       }; 
 
      }); 
 
      //$('#mySelect').change(function() { // 
 
      //  $('#mySelect3').prop('selectedIndex', 0); 
 
      //  $('#mySelect3').attr('disabled', 'disabled'); 
 
      //  }); 
 
      } 
 
     else if ($('#mySelect :selected').data('type') > 2) { 
 
      if ($('#mySelect3 :selected').text() == "Disabled") { // if text on select 3 is "Disabled" 
 
       $('#mySelect3 :selected').text('Select Option'); // changes value for text on first option of 3rd box 
 
       $('#mySelect3').removeAttr('disabled'); // removes disabled on 3rd checkbox 
 
        }; 
 
        $('#mySelect').change(function() { 
 
        if ($('#mySelect :selected').data('type') <= 2) { 
 
         $('#mySelect3').prop('selectedIndex', 0); 
 
         $('#mySelect3').attr('disabled', true); 
 
        }; 
 
       }); 
 
         // $('#mySelect').change(function() { 
 
      // $('#mySelect2').prop('selectedIndex', 0); 
 
     // $('#myselect3').attr('disabled', 'disabled'); 
 
     }; 
 
    }); 
 
});

body { 
 
    padding: 20px; 
 
    background-color: #efefef; 
 
} 
 

 
div.container { 
 
    background-color: #fff; 
 
    display:flex; 
 
} 
 

 
div.result { 
 
    margin-top: 20px; 
 
    background-color: #ddd; 
 
    min-height: 40px; 
 
} 
 

 
.result > p { 
 
    color: red; 
 
} 
 

 
select { 
 
    min-width: 100px; 
 
    margin: 20px 10px; 
 
    border: 1px solid #074481 
 
    } 
 
select option { 
 
    line-height: 30px; 
 
    color: blue; 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <select name="mySelect" id="mySelect"> 
 
    <option value="0" data-type="0" disabled selected>Please Select Option</option> 
 
    <option value="1" data-type="1">option 1</option> 
 
    <option value="2" data-type="2">option 2</option> 
 
    <option value="3" data-type="3">option 3</option> 
 
    <option value="4" data-type="4">option 4</option> 
 
    </select> 
 
    <select name="mySelect2" id="mySelect2" disabled> 
 
    <option value="0" data-type="0" disabled selected>Disabled</option> 
 
    <option value="1" data-type="1">option 1</option> 
 
    <option value="2" data-type="2">option 2</option> 
 
    <option value="3" data-type="3">option 3</option> 
 
    <option value="4" data-type="4">option 4</option> 
 
    </select> 
 
     <select name="mySelect3" id="mySelect3" disabled> 
 
    <option value="0" data-type="0" disabled selected>Disabled</option> 
 
    <option value="1" data-type="1">Yes</option> 
 
    <option value="2" data-type="2">No</option> 
 
    </select> 
 
</div>

和這裏的小提琴：

https://jsfiddle.net/rodcunha/cu07yfzv/12/

預先感謝您的幫助。我確定它可能是一些非常基本的東西，但我只是開始JS/jQ開發，不能在我的生活中弄清楚它。

來源

2017-03-07 rodcunha

有在你的代碼中的一些問題。

第一個是：

$('#mySelect').change(function() {

第二點是：降低複雜性，使你的代碼更易讀，你不能每次輸入相同的功能時附加一個事件處理程序。避免：

else if ($('#mySelect :selected').data('type') > 2) {

另一點是爲了避免重複的代碼行像：

$('#mySelect3').prop('selectedIndex', 0); 
$('#mySelect3').prop('disabled', true); 
$('#mySelect3').text('Disabled');

你可以鏈：

$('#mySelect3').prop({selectedIndex: 0, disabled: true}).find(':selected').text("Disabled");

的片段：

$(function() { //document ready 
 

 
    $('#mySelect').change(function() { 
 
     if ($('#mySelect :selected').data('type') <= 2) { // if user selects the first 2 items 
 
      if ($('#mySelect2 :selected').text() == "Disabled") { //if selection 2 text is Disabled 
 
       $('#mySelect2 :selected').text('Select Option'); // replace text with Select Option 
 
       $('#mySelect2').removeAttr('disabled'); //remove disabled attribute from select box 
 
      }; 
 
      $('#mySelect3').prop({selectedIndex: 0, disabled: true}).find(':selected').text("Disabled"); 
 
     } else { 
 
      if ($('#mySelect3 :selected').text() == "Disabled") { // if text on select 3 is "Disabled" 
 
       $('#mySelect3 :selected').text('Select Option'); // changes value for text on first option of 3rd box 
 
       $('#mySelect3').removeAttr('disabled'); // removes disabled on 3rd checkbox 
 
      }; 
 
      $('#mySelect2').prop({selectedIndex: 0, disabled: true}).find(':selected').text("Disabled"); 
 
     }; 
 
    }); 
 
});

body { 
 
    padding: 20px; 
 
    background-color: #efefef; 
 
} 
 

 
div.container { 
 
    background-color: #fff; 
 
    display:flex; 
 
} 
 

 
div.result { 
 
    margin-top: 20px; 
 
    background-color: #ddd; 
 
    min-height: 40px; 
 
} 
 

 
.result > p { 
 
    color: red; 
 
} 
 

 
select { 
 
    min-width: 100px; 
 
    margin: 20px 10px; 
 
    border: 1px solid #074481 
 
} 
 
select option { 
 
    line-height: 30px; 
 
    color: blue; 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="container"> 
 
    <select name="mySelect" id="mySelect"> 
 
     <option value="0" data-type="0" disabled selected>Please Select Option</option> 
 
     <option value="1" data-type="1">option 1</option> 
 
     <option value="2" data-type="2">option 2</option> 
 
     <option value="3" data-type="3">option 3</option> 
 
     <option value="4" data-type="4">option 4</option> 
 
    </select> 
 
    <select name="mySelect2" id="mySelect2" disabled> 
 
     <option value="0" data-type="0" disabled selected>Disabled</option> 
 
     <option value="1" data-type="1">option 1</option> 
 
     <option value="2" data-type="2">option 2</option> 
 
     <option value="3" data-type="3">option 3</option> 
 
     <option value="4" data-type="4">option 4</option> 
 
    </select> 
 
    <select name="mySelect3" id="mySelect3" disabled> 
 
     <option value="0" data-type="0" disabled selected>Disabled</option> 
 
     <option value="1" data-type="1">Yes</option> 
 
     <option value="2" data-type="2">No</option> 
 
    </select> 
 
</div>

來源

2017-03-07 22:31:16 gaetanoM

謝謝你的幫助。它花了一點時間適應和撞牆，但最終它的工作。感謝你的幫助Gaetano。 – rodcunha

試試這個：

$(function() { //document ready 

$('#mySelect').change(function() { 
    if ($('#mySelect :selected').data('type') <= 2) { // if user selects the first 2 items 
     $('#mySelect2').prop('disabled', false); 
     $('#mySelect3').prop('disabled', 'disabled'); 
    } 
    else if($('#mySelect :selected').data('type') > 2){ 
     $('#mySelect3').prop('disabled', false); 
     $('#mySelect2').prop('disabled', 'disabled'); 

    } 
    else{ 
     $('#mySelect2').prop('disabled', 'disabled'); 
     $('#mySelect3').prop('disabled', 'disabled'); 
    } 
    }); 
});

來源

2017-03-07 22:17:32

感謝您的回覆，我真的很感謝您的幫助。 – rodcunha

您可以爲選擇器添加一個onChange事件，並將它們綁定到它們自己的函數上，這會讓事情變得更加簡單和清晰。所以它會是這樣的：

<select onchange='myFunction()'> 
    <option value="0" data-type="0" disabled selected>Please Select Option</option> 
    <option value="1" data-type="1">option 1</option> 
    <option value="2" data-type="2">option 2</option> 
    <option value="3" data-type="3">option 3</option> 
    <option value="4" data-type="4">option 4</option> 
    </select>

來源

2017-03-07 22:42:02 BlueB3rryI3

感謝您的回覆，感謝您的幫助。 – rodcunha

基於選擇的選項啓用/禁用選擇框

回答

相關問題