Question

使用MVC 5，我创建了一个包含三个选项的下拉菜单：$ 500，$ 5000和Other。我想隐藏“AmountOther”文本字段，直到用户从下拉列表中选择“AmountOther”选项。有人可以帮忙吗？谢谢。

<script src="Scripts/jquery-2.1.3.js"></script>
<script src="Scripts/jquery.validate.min.js"></script>
<script src="Scripts/jquery.validate.unobtrusive.min.js"></script>

    <div class="col-md-10" id="divAmount"> 
      <select class="form-control" data-val="true" id="Amount" name="Amount">
      <option value="">-- Amount --</option>
      <option value="500">$500</option>
      <option value="5000">$5000</option>
      <option value="AmountOther">Amount Other</option>
     </select>
   <div>

   <div class="col-md-10" id="divAmount"> 
     <input id="AmountOther" name="AmountOther" type="text" value="" />
   </div>

<script type="text/javascript">    
 $('#Amount').live('change',function() {
    if (value == "AmountOther") {
        $("#divAmount").show();
        $("#divAmount").show();
    }
    else {
        $("#divAmount").hide();
        $("#divAmount").hide();
    }
});
</script>

Answer 1

正如我在评论中所指出的，ID必须是唯一的。此外，由于jQuery 1.7 .on()优先于已被弃用的.live()。有了它，您可以使用：

$('#Amount').on('change', function () {
    $('#divAmount2').css('display', ($(this).val() == 'AmountOther') ? 'block' : 'none')
});

<强> jsFiddle example

$('#Amount').on('change', function() {
  $('#divAmount2').css('display', ($(this).val() == 'AmountOther') ? 'block' : 'none')
});

#divAmount2 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-10" id="divAmount">
  <select class="form-control" data-val="true" id="Amount" name="Amount">
    <option value="">-- Amount --</option>
    <option value="500">$500</option>
    <option value="5000">$5000</option>
    <option value="AmountOther">Amount Other</option>
  </select>
  <div>
    <div class="col-md-10" id="divAmount2">
      <input id="AmountOther" name="AmountOther" type="text" value="" />
    </div>

Answer 2

value在该上下文中未定义。您还有重复的ID。 live现在是on。

<script type="text/javascript">    
 $('#Amount').on('change',function() {
    var elem = document.getElementById('Amount');
    if (elem.value == "AmountOther") {
        $("#divAmount").show();
    }
    else {
        $("#divAmount").hide();
    }
});
</script>

Answer 3

$('#Amount').live('change',function() {
    if($('#Amount:selected').text() == 'Amount Other'){
       $("#divAmount").show();
    }else{
       $("#divAmount").hide();
    }
});

根据下拉选择的结果填充文本字段

3 个答案: