1

I have been given an un-editable <select> field with 80-100 <option>s. I will be hiding this and manually dividing it's <option>s into six new <select> fields to give the user a shorter lists of options (based on categories).

I need to make sure that the original <select> value get updated based on the selection of one of the other new <select> fields, but only one. If an option is selected from one of the new fields and then yet another option is selected from one of the other new fields, the new field that was selected first should reset.

The original hidden <select> should always be updated with the value of the most-recent selected option from any new field. Only one of the new <select> fields should ever display a selected option.

I can use JavaScript, but cannot link to any resources.

I think I may need to use some combination of these other solutions:

Any help with this would be greatly appreciated!

Super basic version of what I'm starting with:

<form>
<select name="alloptions" class="hidden">
    <option value="value01">Value 1</option>
    <option value="value02">Value 2</option>
    <option value="value03">Value 3</option>
    <option value="value04">Value 4</option>
    <option value="value05">Value 5</option>
    <option value="value06">Value 6</option>
    <option value="value07">Value 7</option>
    <option value="value08">Value 8</option>
    <option value="value09">Value 9</option>
    <option value="value10">Value 10</option>
    <option value="value11">Value 11</option>
    <option value="value12">Value 12</option>
</select>
<select name="group01">
    <option value="value01">Value 1</option>
    <option value="value02">Value 2</option>
</select>
<select name="group02">
    <option value="value03">Value 3</option>
    <option value="value04">Value 4</option>
</select>
<select name="group03">
    <option value="value05">Value 5</option>
    <option value="value06">Value 6</option>
</select>
<select name="group04">
    <option value="value07">Value 7</option>
    <option value="value08">Value 8</option>
</select>
<select name="group05">
    <option value="value09">Value 9</option>
    <option value="value10">Value 10</option>
</select>
<select name="group06">
    <option value="value11">Value 11</option>
    <option value="value12">Value 12</option>
</select>

Community
  • 1
  • 1
webguy0080
  • 11
  • 2

0 Answers0