Change the name of 2nd select if a certain value of the 1st select is chosen

Question

I currently have a form that contains 2 select drop downs. If the user selects option 3 from the first select(entitytype) i need the "name" on the second to change from "stateID" to "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>

you could use `.prop()` and toggle the name property when it's selected — LebCit, May 24 '17 at 22:05
Possible duplicate of [Use jQuery to change a second select list based on the first select list option](https://stackoverflow.com/questions/10570904/use-jquery-to-change-a-second-select-list-based-on-the-first-select-list-option) — Obsidian Age, May 24 '17 at 22:05
not quite, I'm not looking to adjust the option value of the second select, but the name of the second select. — Clyde, May 25 '17 at 12:27

score 0 · Answer 1 · answered May 24 '17 at 22:06

Dynamically changing the name attributes of your form elements doesn't sound like a very good thing to be doing. I'd suggest having a look at your server side logic - assuming it's some kind of model binding causing this requirement.

If you have no other option, then you can hook a change event handler to the first select which reads the selected value and changes the required property on the second. Try this:

$('#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>

jkeys · Answer 2 · 2017-05-24T22:22:02.473

Set a listener to wait until the select input is changed, then if it is set to 'test3' then update the name with the attribute method.

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

And make sure to change it back, if it's changed away from the third option. Also, if you are placing this script before the HTML of the form, make sure to wrap it within the document ready function.

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

Change the name of 2nd select if a certain value of the 1st select is chosen

2 Answers2