Retrieving <select> form parameter when name exists multiple times

Question

I have a situation where I have multiple drop down lists that are hidden or shown depending on the situation. I will always show one of the drop down lists.

So for example, I might have something like this:

<select name="number">
  <option value="1">1</option>
  <option value="11">11</option>
</select>

<select name="number">
  <option value="2">2</option>
  <option value="22">22</option>
</select>

<select name="number">
  <option value="3">3</option>
  <option value="33">33</option>
</select>

Depending on the scenario, one of the drop down lists will be shown whereas the other two will be hidden. Let's say the first drop down list is shown and the other two are hidden. In my controller, I want to retrieve the select value of the drop down list that is not hidden. How would I ensure that the value of the parameter "number" is the one that is shown and not one of the hidden ones?

I could give each of the select elements a different name, but that would require extra logic behind the scenes. It may be the solution but I was just curious as to whether it was possible to give all three select elements the same name and still get the (visible) selected value.

Answer 1

One way is to store the name of the dropdown box which is shown in hidden field and upon submission you should read the value of that hidden field in your controller which in fact is the drop down which was shown.

Answer 2

You can try using jquery....

You may do the following....

1. Give the same class name to all the select elements like class="number"

2. Then using jquery, you can cycle through the select elements and find the value of the one that is not hidden like

    $('.number').each(function(){
    if($(this).css(display) != 'none'){
     var value = $(this).val();
    }   });
   

and by the way.. i don't think it's good programming practice to have more than one element in a form with the same name..!!! :)

Answer 3

You can use jquery eq(index).

For exemple to retrieve the value of the first select you can use :

var value1 = $('select').eq(0).val();

Without jquery, you can make it this way :

var sel = document.getElementsByTagName("select");
var value1 = sel[0].options[sel[0].selectedIndex].value;

Anyway you should rename your elements with differents names and ids.

Answer 4

At first, I also thought that there shouldn't be multiple input fields with the same name but, having thought about it for a few more seconds, I realised that - in the case of radio buttons and checkboxes in particular - there is a good case for duplicate names.

I can also think of a few (convoluted) examples of why you'd want several 'select' elements with the same name.

In the OP's case, providing that only one 'select' is visible at any given moment, then the following would do the job...

var selectedValue = $("select:visible").val();

Pretty straightforward, and easy to remember, I'd say.

Edit: In order to prevent the hidden 'select' elements form being posted with the form, you should also disable them.

Update: Other answers have suggested giving the fields unique names - this will simply move your problem to the server, as it now needs to make decisions about which 'select' value is valid. Disabling the hidden ones will prevent them from being posted, but the server-side code will still have to check for the presence of each name to decide which one was posted. Keeping the names the same, and disabling the hidden elements will result in a single field, with a consistent name being posted, leaving theserv-side code with no extra decisions to make.