jQuery鏈接輸入

我已經做了一些研究，但一直沒有找到答案。jQuery鏈接輸入

我有1個文本輸入和1個選擇框。

如果選擇框的選定值是2，我想要的文本框被隱藏
如果選擇框的選擇值是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>

來源

2015-04-28 Deniz B.

你嘗試過任何JavaScript –

我嘗試了一些代碼，但他們沒有工作，所以我把他們趕走。 –

分享你曾經嘗試過的東西總比不分享任何東西總是更好 –

可以分配一個ID的形式組，然後用它來隱藏/顯示元素

<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 
})

來源

2015-04-28 07:22:32

對不起，是的，它的工作。非常感謝！ –

試試這個：

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

來源

2015-04-28 07:23:45

你可以給ID所有這三個領域：選擇，輸入標籤和輸入框

$(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>

來源

2015-04-28 07:33:43

使用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>

來源

2015-04-28 07:50:16

jQuery鏈接輸入

回答

相關問題