change multiple in single select

[d.schulz81]

Hi all

how can i manipulate a multiple select into a single select dropdown
field with JavaScript?

thanks

 

[Markis Taylor]

document.forms["my_form"]["my_select"].multiple=false;

 

[Grant Wagner]

how can i manipulate a multiple select into a single select dropdown
field with JavaScript?

<form name="myForm">
<input type="button" name="myButton" value="Toggle"
onclick="toggle();">
<br>
<select id="myMultiSelectId" name="myMultiSelect" multiple="multiple">
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
</select>
<select id="mySelectId" name="mySelect" style="display:none;">
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
</select>
</form>
<script type="text/javascript">
function toggle() {
if (document.getElementById) {
var myMultiSel = document.getElementById('myMultiSelectId');
var mySel = document.getElementById('mySelectId');
if (myMultiSel &&
(myMultiSel = myMultiSel.style) &&
mySel &&
(mySel = mySel.style)) {

myMultiSel.display = ('none' == myMultiSel.display ? '' :
'none');
mySel.display = ('none' == myMultiSel.display ? '' :
'none');
}
}
}
</script>

It's sort of fragile, if both select elements somehow ended up in the
same state, clicking the "Toggle" button wouldn't toggle them, it
would turn them both on/off.

The other thing you may want to consider is constructing a new select
using document.createElement() rather than swapping two select
elements on the page (especially if the select contains lots of
options and you don't want to replicate them twice).

 

[Grant Wagner]

document.forms["my_form"]["my_select"].multiple=false;

<form name="myForm">
<input type="button" name="myButton" value="Toggle"
onclick="toggle();">
<br>
<select name="myMultiSelect" multiple="multiple">
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
</select>
</form>
<script type="text/javascript">
function toggle() {
document.forms['myForm'].elements['myMultiSelect'].multiple =
!document.forms['myForm'].elements['myMultiSelect'].multiple;
}
</script>

Results in really odd behaviour in Opera 8.02 and 7.54u2. You get a
single item select, but it has up/down arrow buttons instead of being
a pull-down menu.