Question

你好，我有一个问题，在每个选择上用“其他”选项动态添加输入框。

如果用户单击某个选项的值为other，则输入框将在下一个问题之前追加或添加到选择下方。

<label>question 1</label>
<select>
 <option>op1</option>
 <option>op3</option>
 <option>other</option>
</select>

<label>question 2</label>
<select>
 <option>op1</option>
 <option>op3</option>
</select>
<label>question 3</label>
<select>
 <option>op1</option>
 <option>op3</option>
 <option>other</option>
</select>
<label>question 4</label>
<select>
 <option>op1</option>
 <option>op3</option>
 <option>other</option>
</select>

我的代码：

<form class="" style="padding:15px;" method="POST" action="action/survey" id="form">
               <?php 
                while ($data = mysqli_fetch_array($sql)){
                 $i; 
                $q_ID = $data[0];
                $sql1 = mysqli_query($con,"SELECT GROUP_CONCAT(answer) AS `option`
              FROM `survey_anweroptions` WHERE survey_qID = $q_ID");
                $data1 = mysqli_fetch_array($sql1);
                $question =  $data['question'];
                $option = $data1['option'];
                $option = explode(",",$option);
                ?>

                <div class="form-group">
                  <label for=""><?php echo  $i.".) ".$question ?> </label>
                  <select class="form-control" name="answer[]" id="answer-option">
                    <?php 
                     foreach ($option as $key => $value) {
                     ?>
                      <option value="<?php echo $value?>"><?php echo $value ?></option>
                     <?php
                    }
                    ?>
                  </select>
                </div>
                //add this when the option click as other
                <div class="form-group hidethis" >
                     <label for="">Other</label>
                     <input type="text" name="">
                </div>
                //end
                <?php
                $i++;
              }
                ?>
                <button type="submit" class="" name="submit-survey">Submit</button>
         </form>

动态问题的结果：我想要的是这样的：

Answer 1

不要忘记附加jQuery lib

创建输入并隐藏它：

<label>question 1</label>
<select id="q1">
 <option>op1</option>
 <option>op3</option>
 <option value="other">other</option>
</select>
<input type="text" id="q1i" style="display:none;">

脚本：

<script>
    $('#q1').change(function(){
        if($(this).val() == 'other'){
            $('#q1i').css("display","block");
        }else{
            $('#q1i').css("display","none");
        }
    });
</script>

“千万或百万选择”的版本

<label>question 1</label>
<select id="q1" class="billions">
 <option>op1</option>
 <option>op3</option>
 <option value="other">other</option>
</select>
<input type="text" id="q1i" style="display:none;">
<br>
<br>
<label>question 2</label>
<select id="q2" class="billions">
 <option>op1</option>
 <option>op3</option>
 <option value="other">other</option>
</select>
<input type="text" id="q2i" style="display:none;">


<script>
    $('.billions').each(function() {
        $(this).change(function(){
        if($(this).val() == 'other'){
            $('#'+$(this).attr('id')+'i').css("display","block");
        }else{
            $('#'+$(this).attr('id')+'i').css("display","none");
        }
        });
    });
</script>

如何在循环或循环中制作动态其他选项输入框

1 个答案: