根據用戶的選擇框選擇有條件地顯示單選按鈕

-1

下面是一些示例代碼 - 試圖讓單選按鈕僅在用戶從選擇框中選擇特定選項時才顯示。請參閱指定要求的腳本標記中的兩條評論。根據用戶的選擇框選擇有條件地顯示單選按鈕

<!DOCTYPE HTML> 
<html> 
<head> 
    <style> 
    ul {list-style-type: none;} 
    </style> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
    <script type="text/javascript"> 
     //what jQuery code is needed here so that the following occurs? 
     //1. the label for the radio buttons and the radio buttons themselves only appears when the user picks Formula Type 3 from the select box 
     //2. when the radio buttons and label are not displayed, the space they were in remains but it just looks empty (the word "placeholder", in the third li tag, does NOT move up underneath the select box) 
    </script> 
</head> 
<body> 
    <ul> 
     <li> 
      <label for="FormulaType">Formula Type</label> 
      <select name="FormulaType" id="FormulaType"> 
       <option value=""></option> 
       <option value="Type1">Type1</option> 
       <option value="Type2">Type2</option> 
       <option value="Type3">Type3</option> 
       <option value="Type4">Type4</option> 
      </select> 
     </li> 
     <li> 
      <label for="OutputFat">Output Fat Is</label> 
      <input type="radio" name="OutputFat" value="low">lowest 
      <input type="radio" name="OutputFat" value="high">highest  
      </radio> 
     </li> 
     <li> 
      placeholder 
     </li> 
    </ul> 
</body> 
</html>

來源

2013-08-30 knot22

嘗試

jQuery(function(){ 
    $('#FormulaType').change(function(){ 
     var $this = $(this); 
     $this.closest('li').next().css('visibility', $this.val() == 'Type3'? 'visible' : 'hidden') 
     //if don't want to preserve the space 
     //$this.closest('li').next().toggle($(this).val() == 'Type3') 
    }).triggerHandler('change') 
})

演示：Fiddle

來源

2013-08-30 00:19:14

其次要求沒有得到滿足，OP正在切換CSS知名度保留空白 –

@koala_dev我讀它的其他方式...在這種情況下使用[visibility]（https://developer.mozilla.org/en-US/docs/Web/CSS/visibility） –

是的，它有點模棱兩可，讓我們看看OP是否澄清 –

根據用戶的選擇框選擇有條件地顯示單選按鈕

回答

相關問題