Question

我目前有一个包含2个选择下拉菜单的表单。如果用户从第一个选择（实体类型）中选择选项3，则需要第二个上的“名称”从“stateID”变为“state”。

<form id="home-form" name="home-form" method="get" >

  <select  id="entitytype" class="select required" >
    <option value="">Select Your Entity Type</option>
    <option value="test1">1</option>
    <option value="test1">2</option>
    <option value="test3">3</option>
  </select>
  
  <select  id="stateID" name="stateID" class="select required" >
    <option value="">Select Your State</option>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
  </select>
  
 <button type="submit" class="btn-form">GET STARTED</button>
 
</form>

Answer 1

动态更改表单元素的name属性听起来不是一件好事。我建议看看你的服务器端逻辑 - 假设它是某种模型绑定导致这个要求。

如果您没有其他选项，则可以将change事件处理程序挂钩到第一个select，它读取所选值并更改第二个所需的属性。试试这个：

$('#entitytype').change(function() {
  var value = $(this).val();
  $('#stateID').prop('name', function() {
    return value == 'test3' ? 'state' : 'stateID';
  });
  
  console.log($('#stateID').prop('name')); // only to show the effect in this demo
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="home-form" name="home-form" method="get">
  <select id="entitytype" class="select required">
    <option value="">Select Your Entity Type</option>
    <option value="test1">1</option>
    <option value="test1">2</option>
    <option value="test3">3</option>
  </select>

  <select id="stateID" name="stateID" class="select required">
    <option value="">Select Your State</option>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
  </select>

  <button type="submit" class="btn-form">GET STARTED</button>
</form>

Answer 2

将侦听器设置为等待更改选择输入，然后将其设置为“test3”，然后使用属性方法更新名称。

$('#entitytype').change(function() {
    var name = $(this).val() === 'test3' ? 'state' : 'stateID';
    $('#stateID').attr('name', name); 
});

如果它改变了第三个选项，请确保将其更改回来。此外，如果您将此脚本放在表单的HTML之前，请确保将其包装在文档就绪函数中。

$( document ).ready(function() {
    // Code here
});

如果选择了第一个选择的特定值，则更改第二个选择的名称

2 个答案: