我想创建两个以上的框以供选择

时间:2019-07-15 15:20:10

标签: javascript jquery

所以这是代码内容,我想添加2个对之前步骤有反应的选项。在第4或第5结果之后,您是否有可能根据自己的选择得到一条文本。

jQuery(document).ready(function($) {
  var options = $('#question2 option');
  $('#question1').on('change', function(e) {
    $('#question2').append(options);
    if ($(this).val() != 'Select') {
      $('#question2 option[value!=' + $(this).val() + ']').remove();
    } else {
      $('#question2').val('Select');
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="question1" id="question1">
  <option value="Select">Select</option>
  <option value="Admin">Admin / Presentation</option>
  <option value="Creating">Creating / Play</option>
  <option value="Repair">Repair / DIY</option>
</select>


<select id="question2" name="question2">
  <option value="Select">Select</option>
  <option value="Admin">Removable Hanging</option>
  <option value="Admin">Glueing</option>
  <option value="Admin">Scrapbooking / Photo albums</option>
  <option value="Admin">Wrapping</option>
  <option value="Creating">Modelling</option>
  <option value="Creating">Paper craft (Cards & Paper mache)</option>
  <option value="Creating">Home Décor</option>
  <option value="Creating">Slime</option>
  <option value="Repair">Repair</option>
  <option value="Repair">DIY</option>
</select>

1 个答案:

答案 0 :(得分:0)

喜欢这个吗?

    <select name="question1" id="question1">
   <option value="Select">Select</option>
   <option value="Admin">Admin / Presentation</option>
   <option value="Creating">Creating / Play</option>
   <option value="Repair">Repair / DIY</option>
</select>


<select id="question2" name="question2">
<option value="Select">Select</option>
   <option value="Admin">Removable Hanging</option>
   <option value="Admin">Glueing</option>
   <option value="Admin">Scrapbooking / Photo albums</option>
   <option value="Admin">Wrapping</option>
   <option value="Creating">Modelling</option>
   <option value="Creating">Paper craft (Cards & Paper mache)</option>
   <option value="Creating">Home Décor</option>
   <option value="Creating">Slime</option>
   <option value="Repair">Repair</option>
   <option value="Repair">DIY</option>
 </select>

 <select id="question3" name="question3">
<option value="Select">Select</option>
   <option value="Admin">Removable Hanging</option>
   <option value="Admin">Glueing</option>
   <option value="Admin">Scrapbooking / Photo albums</option>
   <option value="Admin">Wrapping</option>
   <option value="Creating">Modelling</option>
   <option value="Creating">Paper craft (Cards & Paper mache)</option>
   <option value="Creating">Home Décor</option>
   <option value="Creating">Slime</option>
   <option value="Repair">Repair</option>
   <option value="Repair">DIY</option>
 </select>

 <select id="question4" name="question4">
<option value="Select">Select</option>
   <option value="Admin">Removable Hanging</option>
   <option value="Admin">Glueing</option>
   <option value="Admin">Scrapbooking / Photo albums</option>
   <option value="Admin">Wrapping</option>
   <option value="Creating">Modelling</option>
   <option value="Creating">Paper craft (Cards & Paper mache)</option>
   <option value="Creating">Home Décor</option>
   <option value="Creating">Slime</option>
   <option value="Repair">Repair</option>
   <option value="Repair">DIY</option>
 </select>
jQuery(document).ready(function($){
    var options = $('#question2 option');
    $('#question1').on('change', function(e){
        $('#question2').append(options);
        if($(this).val() != 'Select') {
             $('#question2 option[value!=' + $(this).val() +']').remove();
        } else {
            $('#question2').val('Select');
        }
        else {
            $('#question3').val('Select');
        }
        else {
            $('#question4').val('Select');
        }

    });
});