Question

当用户在文本框中输入一些值时，我试图显示选择框，我尝试使用jquery的onchange属性，但它不起作用。

以下是我的代码

$(document).ready(function() {
  $("#total_enter").change(function() {
    $(".gst_sel_wrap").css("display", "block");
  });
})

.gst_sel_wrap {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap_box">
  <input type="text" name="total_enter" id="total_enter">
  <select class="gst_sel_wrap">
    <option>GST SLABS</option>
    <option value="">0%</option>
    <option value="">5%</option>
    <option value="">12%</option>
    <option value="">18%</option>
    <option value="">28%</option>
  </select>
</div>

Answer 1

尝试使用jQuery keydown方法：https://api.jquery.com/keydown/

我还添加了一些代码来隐藏开头的下拉列表，因此效果变得明显。

＆＃13;

$(document).ready(function(){
  $(".gst_sel_wrap").hide();
  $("#total_enter").keydown(function(){
    $(".gst_sel_wrap").show();
  }); 
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap_box">
  <input type="text" name="total_enter" id="total_enter">
   <select class="gst_sel_wrap">
    <option>GST SLABS</option>
    <option value="">0%</option>
    <option value="">5%</option>
    <option value="">12%</option>
    <option value="">18%</option>
    <option value="">28%</option>
  </select> 
</div>

＆＃13;

Answer 2

您可以像我一样使用keyup或keydown或两者：

$(document).ready(function() {
  $("#total_enter").on("keyup keydown",function() {
    $(".gst_sel_wrap").css("display", "block");
  });
})

.gst_sel_wrap {
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap_box">
  <input type="text" name="total_enter" id="total_enter">
  <select class="gst_sel_wrap">
                          <option>GST SLABS</option>
                          <option value="">0%</option>
                          <option value="">5%</option>
                          <option value="">12%</option>
                          <option value="">18%</option>
                          <option value="">28%</option>
                    </select>
</div>

Answer 3

要实现此目的，您可以使用input事件，因为它在按下某个键时以及复制/粘贴值时触发。您还应该检查元素的值以确保它不是当我假设你的选择应该再次隐藏时，可以删除该值，因为该值可以删除。

最后，请注意，您可以使用toggle()以更简洁的方式隐藏或显示基于给定值的选择。试试这个：

$(document).ready(function() {
  $("#total_enter").on('input', function() {
    $(".gst_sel_wrap").toggle(this.value.trim() != '');
  });
})

.gst_sel_wrap {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap_box">
  <input type="text" name="total_enter" id="total_enter">
  <select class="gst_sel_wrap">
    <option>GST SLABS</option>
    <option value="">0%</option>
    <option value="">5%</option>
    <option value="">12%</option>
    <option value="">18%</option>
    <option value="">28%</option>
  </select>
</div>

如何使用'更改'jquery 2.1.4显示选择标记？

3 个答案: