动态更改选择框jquery上的名称属性

Question

我试图动态更改＆＃34;名称＆＃34;每个选择框上的属性。这是我的方案：用户点击第一个选择框选项，根据用户选择的内容，会出现一个新的选择框，其中包含其余选项。用户最多可以执行4次 - 这意味着总共可以显示4个选择框，第一个选择框包含所有选项，第二个选择框获得少1个选项，依此类推。这是我在stackoverflow上的其他人的帮助下完成的。但是，除此之外，我还有这个用户为每个选择框选择的信息，这些信息通过电子邮件发送到我的电子邮件帐户，为了实现这个目的，我需要使用＆＃34; name＆＃34;每个选择框上的属性。所以我的问题是，我怎样才能让这个工作，其中出现的每个选择框的名称属性都会动态更改（例如：name =＆＃34; guest_al-2＆＃34;其中2将更改为3，依此类推一旦动态创建了新的选择框。）

这是我到目前为止所得到的。 DEMO正如您将注意到的，如果您检查它的结果部分，您可以看到它正确生成了名称，但该名称是在创建的所有新选择选项上生成的。如何根据我目前的情况动态改变？

JS：

$(document).on('change', '.ad_inquiry_locations', function() {
    $(this).next('select, button').remove();
    var select = $('<select />', {'class' : 'ad_inquiry_locations', value:"", **name:"guest_al-2"**}); // In bold is where I am placing the name attribute for any dynamically created select box
    var option = $('<option />', {text : 'Add a location', disabled : 'disabled'});
    var button = $('<button />', {text : 'Remove Location', click : function() { 
        $(this).prev().remove() 
        if ( $('.ad_inquiry_locations').length == 1 ) $(this).remove();
    }});

    select.append(option, $('option:not(:selected):not(:first)', this).clone(true) );

    $(this).after( select );
    select.after(button);
});

HTML：

<!-- START OF ADDING LOCATIONS -->
<select id="select1" class="ad_inquiry_locations" value="" name="guest_pl" required>

    <option value="" selected disabled>Select primary location</option>
    <option value="Beloit">Beloit</option>
    <option value="Concordia">Concordia</option>
    <option value="Glen-Elder">Glen Elder</option>
    <option value="Jewell">Jewell</option>

</select>
<!-- END OF ADDING LOCATIONS -->

PHP： - （此部分位于一个单独的文件中，通过电子邮件将这些变量发送给我）

$primaryLocation = $_POST['guest_pl'];
$addLocation2 = $_POST['guest_al-2'];
$addLocation3 = $_POST['guest_al-3'];
$addLocation4 = $_POST['guest_al-4'];

Answer 1

On选项是将var boxNumber = 2;外部添加为全局，并在每次添加新select时将其递增。你可以从你想要的任何数字播种。

    var boxNumber = 2;
    $(document).on('change', '.ad_inquiry_locations', function () {
        $(this).next('select, button').remove();
        var select = $('<select />', {
                'class' : 'ad_inquiry_locations',
                value : "",
                name : "guest_al-" + boxNumber      });
       ....//existing code
       .....
       boxNumber = boxNumber + 1;
        .....
    });


    var button = $('<button />', {
   text: 'Remove Location',
   click: function() {
  $(this).prev().remove()
  if ($('.ad_inquiry_locations').length == 1){ 
  $(this).remove();
  boxNumber = boxNumber-1; //decrements when removed :)
  }
 }
});

输出