Question

美好的一天，

我想表示道歉 - 我是jQuery的新手，并尝试构建一个表单，根据用户选择显示其他字段。

现在我有一个包含很多步骤的表单，并希望在一个页面上进行。所以想法如下：

网站上的第一个表单是：

         <label for="form1">Form1</label>
         <select name="select1" id="select1">
             <option value="airport">Airport</option>
             <option value="railway">Railway station</option>
             <option value="address">Address</option>
         </select>

我要做的是当一个人做出选择时，另一个领域会出现，例如：

如果选择了选项机场，则应将选择字段显示为：

  <select name="select1" id="select1">
      <option value="airport1">Airport1</option>
      <option value="airport2">Airport2</option>
      <option value="airport3">Airport3</option>
  </select>

如果选择了选择铁路，则与机场相同。

如果选择了选项地址，则应显示输入文本字段：

 <input name="sometext" type="text" size="30" maxlength="255">

有什么想法吗？我到处寻找一个教程。

Answer 1

侦听更改事件并检查所选值

$('#checkboxId').change(function(){//some actions})

这是小提琴。http://jsfiddle.net/Goodluck/NS24G/

Answer 2

我举一个例子，当您点击机场时，请查看此DEMO。

基本上，你必须在“select”上绑定click事件，然后检查选择了哪种元素：

$('#select1').on('click', function() {
    var category = $(this).val();
    if(category === 'airport') {
        $('#select2, #airports').fadeIn(200); 
    }
});

Here完整的例子。

Answer 3

我可以为你建议的简短回答是

jQuery("#select1").change(function () {
   //if its airport
  if(jQuery(this).val() == "airport") {
    //do what you need here 
  }
});

EDIT [nonchip]：important：val（）返回所选选项的value属性。

Answer 4

你会做类似的事情：

<label for="select1">Form1</label>
<select name="select1" id="select1">
  <option value="airport">Airport</option>
  <option value="railway">Railway station</option>
  <option value="address">Address</option>
</select>
<label for="select2airport" class="sel2">Airport</label>
<select name="select2airport" id="select2airport" class="sel2">
  <option>...</option>
</select>
<label for="select2railway" class="sel2">Railway</label>
<select name="select2railway" id="select2railway" class="sel2">
  <option value="">...</option>
</select>
<script>
  $('#select1').change(function(){
    $('.sel2').hide(); // hide all
    selection=$('select1').val();
    $('#select2'+selection).show(); // show select
    $('label[for=select2'+selection+']').show(); // show label
  });
</script>

Answer 5

您可能想要隐藏和显示元素（下拉列表，输入字段等）。查看https://api.jquery.com/hide/和https://api.jquery.com/show/

Answer 6

这个jsFiddle应该让你开始：

$(Start);

function Start() {
    $('#MainSelector').change(MainSelectorChange);
}

function MainSelectorChange() {

    var CurrentValue = $('#MainSelector').val();
    var TheHTML = "";

    for (var i = 1; i < 4; i++) {

        TheHTML = TheHTML + '<option value="' + CurrentValue + i +'">' + CurrentValue + i + '</option>';
    }

    $('#SecondarySelector').html(TheHTML);
}

Answer 7

1。）收听change元素的#select1事件

2。）检查值

3.）根据用户选择隐藏/显示适当的元素。

以下是快速演示：http://jsfiddle.net/DmPU9/

Answer 8

<强> HTML

<label for="form1">Form1</label>
  <select name="select1" id="select1">
     <option value="airport">Airport</option>
     <option value="railway">Railway station</option>
      <option value="address">Address</option>
   </select>

<select id="select1airport" id="select1">
   //options
</select>

<select id="select1railway" id="select1">
   //options
</select>

<input id="sometext" type="text" size="30" maxlength="255" style="display:none;">

<强> jquery的

jQuery("#select1").change(function () {
      $('#select1airport').hide();
      $('#select1railway').hide();
      $('#sometext').hide();
      if(jQuery(this).val() == "Airport") {
        $('#select1airport').show();
      }
      else if(jQuery(this).val() == "railway"){
          $('#select1railway').show();
      }
      else if(jQuery(this).val() == "address"){
          $('#sometext').show();
      }
    });

Answer 9

首先，您的所有选项都应该在HTML中......

<select class="travel-conditional" name="airports" id="airports">
    <option value="airport1">Airport1</option>
    <option value="airport2">Airport2</option>
    <option value="airport3">Airport3</option>
</select>
<select class="travel-conditional" name="stations" id="stations">
    <option value="station1">Station1</option>
    <option value="station2">Station2</option>
    <option value="station3">Station3</option>
</select>
<input class="travel-conditional" name="sometext" type="text" size="30" maxlength="255">

...但是被CSS隐藏了。

.travel-conditional {
    display: none;
}

然后使用jQuery，我会在原始下拉列表中检测到change事件，然后对该值执行switch语句。

$('#select1').on('change', function() { // detect change of dropdown
    $('.travel-conditional').hide(); // hide any options already shown
    switch ($('#select1').val()) { // show whichever option is appropriate
      case 'airport':
        $('#airports').show();
        break;
      case 'railway':
        $('#stations').show();
        break;
      case 'address':
        $('#sometext').show();
        break;
      default:
        break;
    }
});

使用动态表单选择jquery

9 个答案: