選擇顯示與jQuery文本輸入

Question

我使用jQuery Mobile，我有一個選擇框，選擇是和否作爲選項。當他們選擇「是」時，我想要顯示文本輸入字段，並在選擇「否」時消失。

jsFiddle link

<fieldset data-role="controlgroup"> 
<label for="joint">Is this a joint gift?</label> 
<select name="slider" id="joint" data-role="slider"> 
    <option value="no">No</option> 
    <option value="yes">Yes</option> 
</select> 
<div id="enter_joint"> 
    <label for="other_joint">Spouse Name:</label> 
    <input name="other_joint" id="other_joint" value="" data-theme="d" /> 
</div> 
</fieldset> 

我希望在選擇設置爲是有使用jQuery只顯示#enter_joint。

Answer 1

$('#enter_joint').hide(); 
$('#joint').change(function(){ 
    $('#enter_joint').toggle('show'); 
}); 

http://jsfiddle.net/aNrea/4/

Answer 2

AlienWebguy的回答會的工作，但我傾向於犯錯的「檢查值」的一面。因此，這裏再檢查一下值，然後確定是否隱藏文本字段。

$(document).ready(function() { 
    $("#enter_joint").hide(); 
    $("#joint").val('no'); 
    $("#joint").change(function() { 
     if ($(this).val() == 'yes') { 
      $("#enter_joint").show(); 
     } else { 
      $("#enter_joint").hide(); 
     } 
    }); 
}); 

jsfiddle

Answer 3

$(document).ready(function(){ 
    $('#enter_joint').hide(); 
    $('#joint').change(function(){ 
     val = $(this).val(); 

     if(val == 'yes') 
     { 
      $('#enter_joint').show(); 
     } 

     if(val == 'no') 
     { 
      $('#enter_joint').hide(); 
     } 
    }); 
}); 

Answer 4

試試這個

$('#joint').change(function(event) { 
    if($('#joint').val() === 'yes') { 
     $('#enter_joint').hide(); } 
    else { $('#enter_joint').show(); 
      } 
}); 

Answer 5

替代語法：

$('#enter_joint').hide(); 
$('#joint').change(function(){ 
    show = $(this).val() == 'yes'; 
    $('#enter_joint').toggle(show); 
});