Как показать поля ввода формы на основе значения выбора?

Я знаю, что это просто, и мне нужно искать в 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" ) ** только тогда, когда пользователь выбирает Other. Я хочу попробовать 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>

Но я не могу это получить. Что мне делать? Благодаря

Ответы

Ответ 1

У вас есть несколько проблем с кодом:

  • вам не хватает открытой цитаты из идентификатора элемента select, поэтому: <select name="dbType" id=dbType">

должен быть <select name="dbType" id="dbType">

  1. $('this') должен быть $(this): нет необходимости в кавычках внутри парантеса.

  2. используйте значение .val() вместо .value(), когда вы хотите получить значение параметра

  3. когда u инициализирует "выбор", делайте это с помощью var перед ним, если вы уже не сделали этого в начале функции

попробуйте следующее:

   $('#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>‌​

Ответ 2

Демо на 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>

Ответ 3

Вы должны использовать val() вместо value(), и вы пропустили стартовую цитату id=dbType" должны быть id="dbType"

Live Demo

Изменить

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

Для

selection = $(this).val();

или

selection = this.value;

Ответ 4

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

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

});

Ответ 5

Я получил свой ответ. Вот мой код

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

И мой script есть

$(function() {

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