如何更改窗体中附加的选择元素的值

Question

我有这样的表单，原来只有一个select元素，但是用户可以在单击' add‘时添加select的数量。然后，当用户提交表单时，有一些无效的输入(即未填充的输入)没有提交表单(我使用php进行表单验证)，然后返回到只有一个select显示的原始页面，因此我使用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

假设选项保持不变，您可以简单地将表单提交到同一个页面(当前页)，在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>

Answer 2

您可以这样做(假设您将表单发回同一个文件)：

//  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] );

    });

}

由于表单处理的线性性质，选择的顺序得到了保证，因此这不应该是一个问题。