jQuery 链式输入

Question

我做了一些研究，但未能找到答案。

我有 1 个文本输入和 1 个选择框。

如果选择框的选择值为2，我希望隐藏文本框
如果selectbox的选择值为1，应该出现文本框。

这是我的代码：

<div class="form-group">
    <label class="col-sm-2 col-sm-2 control-label">Pricing</label>
    <div class="col-sm-10">
       <select class="form-control" name="pricing">
          <option>Please Select</option>
          <option value="1">Value 1</option>
          <option value="2">Value 2</option>
       </select>
    </div>
</div>
<div class="form-group">
    <label class="col-sm-2 col-sm-2 control-label">Our Text Input</label>
    <div class="col-sm-10">
       <input type="text" name="pricing" class="form-control">
    </div>
</div>

Answer 1

您可以为表单组分配一个 ID，然后将其用于 hide/show 该元素

<div class="form-group">
    <label class="col-sm-2 col-sm-2 control-label">Fiyatlandırma</label>
    <div class="col-sm-10">
       <select class="form-control" name="fiyatlandirma">
          <option>Please Select</option>
          <option value="1">Value 1</option>
          <option value="2">Value 2</option>
       </select>
    </div>
</div>
<div class="form-group" id="fiyat-group">
    <label class="col-sm-2 col-sm-2 control-label">Our Text Input</label>
    <div class="col-sm-10">
        <input type="text" name="fiyat" class="form-control"/>
    </div>
</div>

然后

//dom ready handler - wait for the element to load
jQuery(function($){
    //change event handler to trigger when the select is changed
    $('select[name="fiyatlandirma"]').change(function(){
        //hide or display the group element based on the value of select
        $('#fiyat-group').toggle(this.value == '2')
    }).change();//to set the initial display state
})

Answer 2

试试这个：

$(document).ready(function(){
  $("select.form-control").change(function(){
     if($(this).val()=="1")
       $("input[name=fiyat]").hide();
     else
       $("input[name=fiyat]").show();
  });
});

Answer 3

您可以为所有三个字段指定 id：select、输入标签和输入框

$(document).ready(function () {
    $("#pricing").change(function () {
        if ($(this).val() == "1") {
            $("#textbox").hide();
            $("#textLabel").hide();
        } else {
            $("#textbox").show();
            $("#textLabel").show();
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <label class="col-sm-2 col-sm-2 control-label">Pricing</label>
    <div class="col-sm-10">
       <select class="form-control" name="pricing" id="pricing">
          <option>Please Select</option>
          <option value="1">Value 1</option>
          <option value="2">Value 2</option>
       </select>
    </div>
</div>
<div class="form-group">
    <label class="col-sm-2 col-sm-2 control-label" id="textLabel">Our Text Input</label>
    <div class="col-sm-10">
       <input type="text" name="pricing" id="textbox" class="form-control">
    </div>
</div>

Answer 4

使用 java 脚本

<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Fiyatlandırma</label>
<div class="col-sm-10">
   <select class="form-control" id="select" name="fiyatlandirma"  onclick="hide()">
      <option>Please Select</option>
      <option value="1">Value 1</option>
      <option value="2" >Value 2</option>
   </select>
   </div>
</div>
<div class="form-group">
   <label class="col-sm-2 col-sm-2 control-label">Our Text Input</label>
    <div class="col-sm-10">
        <input type="text" id="fiyat" name="fiyat" class="form-control">
    </div>
 </div>

 <script>
     function hide(){
      var select = document.getElementById("select").selectedIndex;
      var input = document.getElementById("fiyat");
      if(select == 1)
      input.style.visibility= "hidden";
      else if(select == 2)
      input.style.visibility= "visible";
     }
</script>

jQuery 链式输入

jQuery Chained Input

html

javascript

jquery

twitter-bootstrap-3