基于选择的选项启用/禁用选择框

问题描述：

我试图启用/禁用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开发，不能在我的生活中弄清楚它。

答

有在你的代码中的一些问题。

第一个是：

$('#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>

谢谢你的帮助。它花了一点时间适应和撞墙，但最终它的工作。感谢你的帮助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'); 
    } 
    }); 
});

感谢您的回复，我真的很感谢您的帮助。 – 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>

感谢您的回复，感谢您的帮助。 – rodcunha

基于选择的选项启用/禁用选择框

相关推荐