I have a unique situation:
1) One of my dropdown's choices features various car names.
2) Another dropdown has two options:
When selecting each option in the second dropdown, the following should occur:
a) Choose UserInput - This action will hide the left multiselect box and display a text box in the same location. Users can input any car name into the textbox and use the buttons to move it to the right-hand side select box. The right-to-left button should be disabled in this scenario.
b) Opt for AutoPopulate - In this case, a multiselect box should appear on the left side where the textbox was located. The textbox will disappear and the multiselect box will populate with the cars available in the first dropdown. Users can freely select and transfer cars between the two boxes.
I am just starting to learn Javascript and would appreciate some assistance with this task.
$(function(){
$("#button1").click(function(){
$("#list1 > option:selected").each(function(){
$(this).remove().appendTo("#list2");
});
});
$("#button2").click(function(){
$("#list2 > option:selected").each(function(){
$(this).remove().appendTo("#list1");
});
});
}); .bloc { display:inline-block; vertical-align:top; overflow:hidden; border:solid grey 1px; width:100px;}
.bloc select { padding:10px; margin:-5px -20px -5px -5px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
DropDown1:
<select id="DropDown1" name="DropDown1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br><br>
DropDown2:
<select id="DropDown2" name="DropDown2">
<option value="">-- Select --</option>
<option value="oneUsrInput">User Input</option>
<option value="twoAutoPopulate">Auto Populate</option>
</select>
<br><br>
<input type="text" id="TextBoxId" name="TextBoxId">
<div class="bloc">
<select id="list1" multiple="multiple" rows=2>
<option value=1>Option 1</option>
<option value=2>Option 2</option>
<option value=3>Option 3</option>
<option value=4>Option 4</option>
<option value=5>Option 5</option>
<option value=6>Option 6</option>
</select>
</div>
<div style="display:inline-block;">
<input id="button1" type="button" value=">>" />
<br/>
<input id="button2" type="button" value="<<" />
</div>
<div class="bloc">
<select id="list2" multiple="multiple" rows=2>
</select>
</div>