从两个选择选项值中获取价值

时间:2018-07-24 18:56:53

标签: jquery html

我有两个选择选项标签div,其中我只能选择一个选择选项标签的值。

如果第二选择选项的值不可用,那么我想要第一选择选项的值意味着必须避免第二选择;如果第二选择的值可用,那么我只希望第二选择值意味着这一次我必须忽略第一选择选项值,因为第二个很重要。

问题是,如果第二选择不可用,我将无法获得第一选择的价值。

HTML

               <div class="form-group col-lg-4 col-xs-12">
            <p for="select_drug">Select Drug</p>
            <select name="select_drug1" id="select_drug1" class="form-control " required="required">
                    <option value="100"></option>
                    <option value="105"></option>
                    <option value="106"></option>
                    <option value="107"></option>
            </select>
        </div>
        <div id="anothersubcategory" class="form-group col-lg-4 col-xs-12 pull-right">
            <p for="selectsub">Select Drug Sub-Category</p>
            <select style="width:100%;" name="selectsub" id="selectsub" class="form-control ">
                    <option value="0">Choose One</option>
                    <option value="80"></option>
                    <option value="82"></option>
                    <option value="85"></option>
                    <option value="86"></option>
            </select>
        </div>

JS

function editDrug() {
  var value = $('#select_drug1').val();
  var svalue = $('#selectsub').val();
  if (svalue == '' || svalue == '0' || svalue == 'null') {
    var id = svalue;
  } else {  
    var id = value;  
  }        
  alert(id);
}

2 个答案:

答案 0 :(得分:3)

有关每个步骤在做什么的信息,请参见代码中的注释。

var $selectDrug = $('#select_drug1');
var $selectSub = $('#selectsub');

//bind on the change of the selects, just to see the computed value
$selectDrug.add($selectSub).on('change', function () {
  //get the first value
  var value = $selectDrug.val();
  
  //the "not selected" value is 0, so if it is zero, ignore it
  if ($selectSub.val() !== '0') {
    value = $selectSub.val();
  }
  
  //print out the value
  console.log(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group col-lg-4 col-xs-12">
  <p for="select_drug">Select Drug</p>
  <select name="select_drug1" id="select_drug1" class="form-control " required="required">
    <option value="100">100</option>
    <option value="105">105</option>
    <option value="106">106</option>
    <option value="107">107</option>
  </select>
</div>
<div id="anothersubcategory" class="form-group col-lg-4 col-xs-12 pull-right">
  <p for="selectsub">Select Drug Sub-Category</p>
  <select style="width:100%;" name="selectsub" id="selectsub" class="form-control ">
    <option value="0">Choose One</option>
    <option value="80">80</option>
    <option value="82">82</option>
    <option value="85">85</option>
    <option value="86">86</option>
  </select>
</div>

答案 1 :(得分:0)

似乎您刚刚颠倒了if条件的逻辑...

$("select").on("change",function(){
  var value = $('#select_drug1').val();
  var svalue = $('#selectsub').val();
  if (svalue == '' || svalue == '0' || svalue == 'null') {
    var id = value;
  } else {  
    var id = svalue;  
  }        
  console.log(id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group col-lg-4 col-xs-12">
  <p for="select_drug">Select Drug</p>
  <select name="select_drug1" id="select_drug1" class="form-control " required="required">
    <option value="100">100</option>
    <option value="105">105</option>
    <option value="106">106</option>
    <option value="107">107</option>
  </select>
</div>
<div id="anothersubcategory" class="form-group col-lg-4 col-xs-12 pull-right">
  <p for="selectsub">Select Drug Sub-Category</p>
  <select style="width:100%;" name="selectsub" id="selectsub" class="form-control ">
    <option value="0">Choose One</option>
    <option value="80">80</option>
    <option value="82">82</option>
    <option value="85">85</option>
    <option value="86">86</option>
  </select>
</div>