使用jquery禁用某个条件的下拉列表

时间:2012-07-05 20:37:12

标签: javascript jquery

我有两个下拉命名为“Country”和“State”。 “国家”下降有两个值,印度和巴基斯坦。如果我选择“印度”然后我的第二个下拉“状态”应该启用但如果我选择“巴基斯坦”然后我的第二个下拉应该被禁用。我想使用jquery这样做。 提前谢谢。

2 个答案:

答案 0 :(得分:2)

此问题可以分解为以下内容:

If the country is changed, do the following:
   Determine if the country is India. If it is, enable the state dropdown
      or, if the country is not India, disable the state dropdown

用代码编写,它将是:

<select id="country">
  <option value="india">India</option>
  <option value="pakistan">Pakistan</option>
</select>
<select id="state">
   <option value="1">State 1</option>
   <option value="2">State 2</option>
   <option value="3">State 2</option>
</select>

<script language="javascript">
$(document).ready(function() {

    $("#country").change(function() { // The country value has been changed

          if($(this).val() == 'india') { // The country is set to india

              $("#state").prop('disabled', false); // Since the country is India, enable the state dropdown

          } else { // The country is NOT India

              $("#state").prop('disabled', true); // Since the country is NOT India, so disable the state dropdown

          }

      }

});
</script>

有更多“优雅”和“优化”的方式来编写这段代码,但我认为上述内容对于一个刚刚学会解决这类问题的人来说是最清晰的。

答案 1 :(得分:1)

$country.change(function(){
  $state.prop('disabled', true)
  if (/india/i.test($(this).val()))
    $state.prop('disabled', false)
})