Question

我有这个表单，其中最初有一个选择元素，但用户可以在点击“添加”时添加选择的数量。然后，当用户提交表单，并且有一些无效的输入（即未填充的输入）时，表单未提交（我使用php进行表单验证），并且它返回到原始页面，只显示了1个选项，所以我使用jquery并对提交的select数组进行计数，并将select元素与最初选择的用户一样多。现在的问题是如何将附加的select的值设置为用户选择的值？

很抱歉这个错误的解释，这是代码，希望它有助于提供更清晰的图片：

HTML

<div class='select_container'>
    <select name='select[]'>
       <option value='option1'>Option1</option>
        <option value='option2'>Option2</option>
        <option value='option3'>Option3</option>
    </select>
</div>

<div class='add'>Add</div>

JQuery的

$(document).ready(function() {

    //User can add more select element by clicking 'add'

    $('.add').click(function() {
        $('<select name="select[]">' +
          '<option value="option1">Option1</option>' +
          '<option value="option2">Option2</option>' +
          '<option value="option3">Option3</option>' +
          '</select>').appendTo('.select_container');
    });

    //When form failed to submit(i.e invalid input), automatically 
    //add the select element as many as the user added at first

    //get the user select input, make it into array

    var select = "<?php $select= echo implode(',',$_POST['select']); ?>";
    var select_array = select.split(',');
    var select_length = select_array.length;

    //after counting length of array, add the amount of select element the user added

    for (i = 1; i < select_length; i++) {
        $('<select name="select[]">' +
          '<option value="option1">Option1</option>' +
          '<option value="option2">Option2</option>' +
          '<option value="option3">Option3</option>' +
          '</select>').appendTo('.select_container');
    }
});

我设法附加了select元素，这样当表单无法提交时，用户不必重新添加select元素，并且当表单无法提交时，我想要附加的select元素，以自动设置为用户选择。

我尝试了delegate()，on()和其他一些东西，但我仍然无法设置附加的select元素的值。我只能在html中设置原始第一个选择的值。

如果有人知道如何设置附加选择的值，所有的答案和建议都非常受欢迎和赞赏。

由于

Answer 1

你可以做这样的事情（我假设你把表格发回到同一个文件）：

//  if reloaded after post basically
if( select.length > 0 ) {
    //  if there are multiple groups of selects, add class and call each on that
    $('select').each(function(i) {
        $(this).val( select_array[i] );

    });

}

由于表单处理的线性特性，选择的顺序是有保证的，所以这不应该是一个问题。

Answer 2

假设选项保持不变，您可以通过将表单提交到同一页面（当前页面）来实现，在您的php文件中，html部分应该看起来像这样

 <div class='select_container'>
    <select name='select[]'>
       <option value='option1'>Option1</option>
        <option value='option2'>Option2</option>
        <option value='option3'>Option3</option>
    </select>
 <?php
      if(!isset($_POST)&&!empty($_POST['select'])){
         for($i=0;$i<sizeof($_POST['select']);$i++){
           echo '<select>';
             $options=array('option1','option2','option3');
             for($j=0;$j<sizeof($options)){
                 if($options[$j]==$_POST['select'][$i]){
                    echo '<option 
                          value="'.$options[$j].'" 
                          selected="selected">'.$options[$j].'</option>';
                 }else{
                    echo  '<option
                     value="'.$options[$j].'">'.$options[$j].'</option>';
                 }
             }
           echo '</select>';
         }
      }
 ?>
</div>

<div class='add'>Add</div>

如何更改表单中附加的选择元素的值

2 个答案: