選擇框不返回預期值

Question

我有一個窗體，將顯示不同的選項，具體取決於第一個選擇框。

如果選擇了選項1，則會顯示第二個下拉菜單，並顯示預先選擇的選項。如果選擇了選項2，則會顯示具有兩個選項的不同下拉菜單。

這兩個新的下拉菜單將具有相同的ID和名稱，用於將選項傳遞給後端，但會一直返回錯誤的值。這裏是一個 jsbin

<p class="input_title">I will use:</p> 
<select name="js-rp-use" class="signup-select js-rp-use" id="rp-use" class="signup-select"> 
    <option value="">Select Plan</option> 
    <option value="SOLO">Manage my own items</option> 
    <option value="OTHER">Manage others items</option> 
</select> 

<div class="js-rentpro-plan-solo"> 
    <p class="input_title">System Plan:</p> 
    <select name="plan_id" id="plan_id" class="signup-select"> 
    <option value="-1">Select plan</option> 
    <option value="1" selected>Plan Solo</option> 
    </select> 
</div> 

<div class="js-rentpro-plan-other"> 
    <p class="input_title">System Plan:</p> 
    <select name="plan_id" id="plan_id" class="signup-select"> 
    <option value="-1">Select plan</option> 
    <option value="2">Plan Business</option> 
    <option value="3">Plan Max</option> 
    </select> 
</div> 

<br><br><br> 
<button type="button" id="submit">Submit</button> 



// jquery 
$("div[class^='js-rentpro-plan-']").hide(); 

$('.js-rp-use').change(function(){ 

    $('#js-rp-plan-text, .js-rentpro-plan-solo, .js-rentpro-plan-other').hide(); 

    if($(this).val() == 'SOLO'){ 
    $('.js-rentpro-plan-solo').show(); 
    } else if($(this).val() == 'OTHER'){ 
    $('.js-rentpro-plan-other').show(); 
    } else { 
    $('#js-rp-plan-text').show(); 
    } 

}); 

$('#submit').click(function(){ 
    console.log('plan id is: ' + $('#plan_id').val()); 
}); 

Answer 1

ID必須是唯一的。而不是使用相同的ID，使用類。

你得到錯誤值的原因是你正在使用$('#plan_id').val()它會返回它找到的第一個匹配的值。

編輯：
要獲得與當前結構正確的值，你可以使用：

var vl = $(this).siblings('div:visible').find('select').val() 
console.log('plan id is: ' + vl); 

但我建議你修改結構，以形式包裝他們，給你選擇的容器同一類，所以你可以更容易地訪問它們。使用元素，class和id

jsfiddle DEMO

您的選擇將始終使用的第一場比賽，不管你。或使用類，你可以：

$('.signup-select:visible').val()