동적으로 선택 상자 jquery

Question

의 이름 특성을 변경하려면 각 선택 상자에서 "이름"특성을 동적으로 변경하려고합니다. 내 시나리오는 다음과 같습니다. 사용자가 선택한 항목에 따라 첫 번째 선택 상자 옵션을 클릭합니다. 나머지 옵션과 함께 새로운 선택 상자가 나타납니다. 사용자는 최대 4 번까지이 작업을 수행 할 수 있습니다. 즉, 총 4 개의 선택 상자가 모든 옵션을 포함하는 첫 번째 선택 상자와 함께 표시 될 수 있고, 두 번째 선택 상자는 1 개의 적은 옵션을 얻는 등으로 표시 될 수 있습니다. 이것은 내가 stackoverflow에 다른 사람의 도움으로 성취했습니다. 그러나 모든 것을 제외하고 필자는 사용자가 전자 메일 계정에 phpmail 된 각 선택 상자에 대해 선택한 내용을 가지고 있으며이 작업을 수행하려면 각 선택 상자에서 "이름"특성을 사용해야합니다. 그래서 내 질문에, 어떻게 작동하도록이 얻을 수있는 각각의 선택 상자가 나타납니다 그 이름 속성이 동적으로 변경됩니다 (예 : 이름 = "guest_al - 2"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 :) 
    } 
} 
}); 

출력 무엇 이것에 대해