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，而是使用class。

你得到错误值的原因是你正在使用$('#plan_id').val()它将返回它找到的第一个匹配的值。

修改
要使用当前结构获得正确的值，您可以使用：

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

但我建议你修改结构，将它们包装在一个表单中，给你的选择容器提供相同的类，这样你就可以更容易地访问它们了。

jsfiddle DEMO

您的选择器将始终使用第一个匹配，无论您使用的是元素，类还是ID。或者使用课程：

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

选择框不返回预期值

1 个答案: