Question

我正在使用这样的Bootstrap构建表单：

<div class="form-group">
    <label for="topic">What can we help you with ?</label>
    <select class="form-control" name="topic">
          <option value="Work with us">I want to know more about your services</option>
          <option value="Request a demo">I want a no-obligation demo of your services</option>
          <option value="Employment query">I am interested in working for you</option>
     </select>
</div>
....
<div class="form-group">
    <label for="time_callback">* What time should we call you back ?</label>
    <select class="form-control" name="time_callback">
         <option value="Morning">Morning</option>
         <option value="Afternoon">Afternoon</option>
         <option value="Evening">Evening</option>
    </select>
</div>
------------
// replace with "time_callback"
    <div class="form-group">
            <label for="send_cv">* Upload your CV</label>
            <input type="file" name="send_cv" />
        </div>

默认情况下，表单有2个下拉列表，但当我从"topic"中选择"Employment query"时，我想用"send_cv"替换"time_callback"（上传输入）（第二次下拉），所以基本上它会给出两种不同形式的想法。

我该怎么做？

Answer 1

<强> DEMO

将班级callback和upload添加到各自的父级div中，如下所示：

<div class="form-group callback"> <!--Add here-->
    <label for="time_callback">* What time should we call you back ?</label>
    <select class="form-control" name="time_callback">
         <option value="Morning">Morning</option>
         <option value="Afternoon">Afternoon</option>
         <option value="Evening">Evening</option>
    </select>
</div>
<div class="form-group upload"><!--and here-->
       <label for="send_cv">* Upload your CV</label>
       <input type="file" name="send_cv" />
</div>

首先隐藏callback div

.callback{
   display:none;
}

为on change

撰写select个活动

$('select[name="topic"]').on('change',function(){
   if($(this).val()=="Employment query")
   {
        $('.upload').hide();
        $('.callback').show();
   }
   else
   {
        $('.upload').show();
        $('.callback').hide();
   }
});

<强>更新

您可以使用switch case

执行以下操作

$('select[name="topic"]').on('change',function(){
   var selectedVal=$(this).val();
   switch(selectedVal){
       case 'Employment query':
                   $('.upload').hide();
                   $('.callback').show();
             break;
       case 'some more cases':case 'one more case': 
       //Add this into consideration if you have multiple cases where functionality has to be same
                   $('.upload').show();
                   $('.callback').hide();
             break;
       default: //change this according to your need
                   $('.upload').show();
                   $('.callback').hide();
             break;
   }
});

Answer 2

使用jQuery更改功能使div可见或不可用

e.g。

$("#topic").change(function() {
    if ($("#topic").val() == "Employment query") {
        $("#div1").hide();
        $("#div2").show();
    } 
 }

别忘了你需要把id =＆＃39; div1＆＃39;还有id =＆＃39; div2＆＃39;在适当的div

上

Answer 3

尝试以下代码，

＆＃13;

$("#selecttopic").change(function(){
      var selectedVal = $("#selecttopic option:selected").val();
      if(selectedVal == "Employment query"){
          $("#divsendcv").show();
          $("#divcallback").hide();
        
        }else{
          $("#divsendcv").hide();
          $("#divcallback").show();
          }
  });

＆＃13;

<div class="form-group">
    <label for="topic">What can we help you with ?</label>
    <select class="form-control" name="topic" id="selecttopic">
          <option value="Work with us">I want to know more about your services</option>
          <option value="Request a demo">I want a no-obligation demo of your services</option>
          <option value="Employment query">I am interested in working for you</option>
     </select>
</div>
....
<div class="form-group" id="divcallback">
    <label for="time_callback">* What time should we call you back ?</label>
    <select class="form-control" name="time_callback">
         <option value="Morning">Morning</option>
         <option value="Afternoon">Afternoon</option>
         <option value="Evening">Evening</option>
    </select>
</div>
------------
// replace with "time_callback"
    <div class="form-group" id="divsendcv" style="display:none;">
            <label for="send_cv">* Upload your CV</label>
            <input type="file" name="send_cv" />
        </div>

＆＃13;

如果您对此有任何问题，请告诉我

Bootstrap - 根据下拉列表中的所选项目更改表单字段

3 个答案: