如何根據選擇值顯示錶單輸入字段？

我知道這很簡單，我需要在Google中搜索。我盡力而爲，找不到更好的解決方案。我有一個表單域，它需要一些輸入和一個選擇域，它有一些值。它還具有「其他」價值。如何根據選擇值顯示錶單輸入字段？

我要的是：

如果用戶選擇了「其他」選項，文本字段指定爲「其他」應顯示。當用戶選擇另一個選項（比'其他'），我想再次隱藏它。我如何使用JQuery執行該操作？

這是我的JSP代碼

<label for="db">Choose type</label> 
<select name="dbType" id=dbType"> 
    <option>Choose Database Type</option> 
    <option value="oracle">Oracle</option> 
    <option value="mssql">MS SQL</option> 
    <option value="mysql">MySQL</option> 
    <option value="other">Other</option> 
</select> 

<div id="otherType" style="display:none;"> 
    <label for="specify">Specify</label> 
    <input type="text" name="specify" placeholder="Specify Databse Type"/> 
</div>

現在我想說明DIV標籤**（ID = 「OTHERTYPE」）**僅當用戶選擇其他。我想試試JQuery。這是我試過的代碼

<script type="text/javascript" 
    src="jquery-ui-1.10.0/tests/jquery-1.9.0.js"></script> 
<script src="jquery-ui-1.10.0/ui/jquery-ui.js"></script> 
<script>  
$('#dbType').change(function(){ 

    selection = $('this').value(); 
    switch(selection) 
    { 
     case 'other': 
      $('#otherType').show(); 
      break; 
     case 'default': 
      $('#otherType').hide(); 
      break; 
    } 
}); 
</script>

但是我無法得到這個。我該怎麼辦？由於

來源

2013-03-22 iCode

這個解決方案工作得也很好：HTTP：//stackov erflow.com/a/29321711/5925104 – 2017-02-11 23:21:15

你有幾個問題與您的代碼：

你缺少的選擇元素的ID的公開報價，因此：<select name="dbType" id=dbType">

應<select name="dbType" id="dbType">

$('this')應該是$(this)：沒有必要爲paranthesis內的報價。

使用.val（）而不是。值（）當你想獲取選項的值

當u初始化「選擇」，在它前面的一個變種做到這一點，除非你已經在函數的beggining做過

嘗試這個辦法：用開關使用

$('#dbType').on('change',function(){ 
     if($(this).val()==="other"){ 
     $("#otherType").show() 
     } 
     else{ 
     $("#otherType").hide() 
     } 
    });

http://jsfiddle.net/ks6cv/

UPDATE：

$('#dbType').on('change',function(){ 
    var selection = $(this).val(); 
    switch(selection){ 
    case "other": 
    $("#otherType").show() 
    break; 
    default: 
    $("#otherType").hide() 
    } 
});

UPDATE與jQuery和jQuery的UI鏈接：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>‌

來源

2013-03-22 09:43:24 DVM

我仍然無法獲取它。這是因爲，我使用的JQuery是錯誤的？ – iCode 2013-03-22 09:52:49

我仍然無法得到。我在問，這個問題是否與此有關？ '

你必須使用val()而不是value()和你已經錯過了開始的報價id=dbType"應該id="dbType"

Live Demo

變化

selection = $('this').value();

爲

selection = $(this).val();

或

selection = this.value;

來源

2013-03-22 09:38:26 Adil

$('#dbType').change(function(){ 

    var selection = $(this).val(); 
    if(selection == 'other') 
    { 
     $('#otherType').show(); 
    } 
    else 
    { 
     $('#otherType').hide(); 
    } 

});

來源

2013-03-22 09:40:39

我得到了它的答案。這裏是我的代碼

<label for="db">Choose type</label> 
<select name="dbType" id=dbType"> 
    <option>Choose Database Type</option> 
    <option value="oracle">Oracle</option> 
    <option value="mssql">MS SQL</option> 
    <option value="mysql">MySQL</option> 
    <option value="other">Other</option> 
</select> 

<div id="other" class="selectDBType" style="display:none;"> 
<label for="specify">Specify</label> 
<input type="text" name="specify" placeholder="Specify Databse Type"/> 
</div>

然後我的腳本

$(function() { 

     $('#dbType').change(function() { 
      $('.selectDBType').slideUp("slow"); 
      $('#' + $(this).val()).slideDown("slow"); 
     }); 
    });

來源

2013-03-25 10:41:02 iCode

Demo on JSFiddle

$(document).ready(function() { 
    toggleFields(); // call this first so we start out with the correct visibility depending on the selected form values 
    // this will call our toggleFields function every time the selection value of our other field changes 
    $("#dbType").change(function() { 
     toggleFields(); 
    }); 

}); 
// this toggles the visibility of other server 
function toggleFields() { 
    if ($("#dbType").val() === "other") 
     $("#otherServer").show(); 
    else 
     $("#otherServer").hide(); 
}

HTML：

<p>Choose type</p> 
    <p>Server: 
     <select id="dbType" name="dbType"> 
      <option>Choose Database Type</option> 
      <option value="oracle">Oracle</option> 
      <option value="mssql">MS SQL</option> 
      <option value="mysql">MySQL</option> 
      <option value="other">Other</option> 
     </select> 
    </p> 
    <div id="otherServer"> 
     <p>Server: 
      <input type="text" name="server_name" /> 
     </p> 
     <p>Port: 
      <input type="text" name="port_no" /> 
     </p> 
    </div> 
    <p align="center"> 
     <input type="submit" value="Submit!" /> 
    </p>

來源

2016-09-09 09:58:28 Editor

相關問題

如何根據選擇值顯示錶單輸入字段？

回答

相關問題