/    Sign up×
Community /Pin to ProfileBookmark

Multiple property in select element

I have submit button in a form. On clicking that submit button a javascript function is called which creates a select elements. I wish to create a select element with multiple property true which means that I can select multiple options together. Even after setting the multiple property as “true” or “multiple” I am unable to do so. Can anyone please help me out with it? Enclosing below the code

[CODE]<html>
<head>
<script type=”text/javascript”>
function create()
{
var select = document.createElement(‘select’);
select.multiple=”multiple”;
select.size=”3″;

var option0 = document.createElement(‘option’);
var t = document.createTextNode(“Select”);
option0.setAttribute(“value”, 0);
option0.appendChild(t);
select.appendChild(option0);

var option1 = document.createElement(‘option’);
var t = document.createTextNode(“A”);
option1.appendChild(t);
select.appendChild(option1);

var option2 = document.createElement(‘option’);
var t = document.createTextNode(“B”);
option2.appendChild(t);
select.appendChild(option2);

document.getElementById(‘Form’).appendChild(select);

</script>

</head>
<body>
<form id=”Form” >
<INPUT type=”button” name=”Submit” onclick = “create()”/>
</form>
</body>
</html>[/CODE]

I tried giving select.multiple=”multiple” as well as select.multiple=”true” but both don’t seem to work. Is there some other way that I need to declare a multiple select in Javascript ?

Would appreicate your help.Thanks in advance

Ruchi

to post a comment
JavaScript

12 Comments(s)

Copy linkTweet thisAlerts:
@magentaplacentaJan 24.2008 — What you want is [b]select-multiple[/b]. You also need to close your function with a }.

Your code works in Firefox, are you having problems with IE?
Copy linkTweet thisAlerts:
@cgishackJan 24.2008 — you did not close your function() { }

It worked for me in IE7 and FF2
<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;script type="text/javascript"&gt;
function create()
{
var select = document.createElement('select');
select.multiple="multiple";
select.size="3";

<i> </i> var option0 = document.createElement('option');
<i> </i> var t = document.createTextNode("Select");
<i> </i> option0.setAttribute("value", 0);
<i> </i> option0.appendChild(t);
<i> </i> select.appendChild(option0);

<i> </i> var option1 = document.createElement('option');
<i> </i> var t = document.createTextNode("A");
<i> </i> option1.appendChild(t);
<i> </i> select.appendChild(option1);

<i> </i> var option2 = document.createElement('option');
<i> </i> var t = document.createTextNode("B");
<i> </i> option2.appendChild(t);
<i> </i> select.appendChild(option2);

<i> </i> document.getElementById('Form').appendChild(select);
}

&lt;/script&gt;

<i> </i> &lt;/head&gt;
&lt;body&gt;
&lt;form id="Form" &gt;
&lt;INPUT type="button" name="Submit" onclick = "create()"/&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;


Drew
Copy linkTweet thisAlerts:
@ruchi_bhindwaleauthorJan 24.2008 — @cgishack

Sorry about that but it was a typing mistake. I have given the closing parantheses in the code but it doesnot seem to work for me. Are you able to select multiple options?

@magentaplacenta

Yes I am trying in the IE.

Moroever I tried alerting the multiple property of this element in another javascript function and it says false. It means the multiple property is not getting set to true. I am just wondering if there is some other way of declaration ?

What is it that I am doing wrong if the brackets are right??

Thanks for the response
Copy linkTweet thisAlerts:
@cgishackJan 24.2008 — you have to hold down [B]shift [/B]to select more than 1.

Are you doing that ?
Copy linkTweet thisAlerts:
@ruchi_bhindwaleauthorJan 25.2008 — Yes I am using the shift to select multiple options but I am unable to select more than one option at a time. Moroever the multiple property returns false when I checked it in another javasrcipt function.
Copy linkTweet thisAlerts:
@cgishackJan 25.2008 — are you using IE 7 or IE 6 ??

The attachment shows its working for me.

[upl-file uuid=104fdf87-69eb-44c5-8bd2-b5860a1ed3c1 size=29kB]test.gif[/upl-file]
Copy linkTweet thisAlerts:
@cgishackJan 25.2008 — also.. You could be confusing the JS language..

You are using a key word 'select' as a variable..

Try using something different like 'selectMenu'
<i>
</i>var selectMenu = document.createElement('select');
selectMenu .multiple="multiple";
selectMenu .size="3";


Drew
Copy linkTweet thisAlerts:
@ruchi_bhindwaleauthorJan 25.2008 — Not working... It is soo strange. I copied your corrected code and tried running it but it doesnot just work. I am using IE 6. Please find the snapshot of the result page.

[upl-file uuid=273c84d0-eff6-42cf-b3dd-05807aa8b6cb size=624B]sample.zip[/upl-file]
Copy linkTweet thisAlerts:
@cgishackJan 25.2008 — did you rename 'select' to something else ?

that is a reserved word.

If still no go.. why not just do it by injecting the HTML through innerHTML ?
Copy linkTweet thisAlerts:
@cgishackJan 25.2008 — This is kind of sloppy, but works

<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;script&gt;

function createMenu()
{
//create select menu
var html = '&lt;select name="select" size="5" multiple="multiple" id="mySelectMenu"&gt;';
html+='&lt;option&gt;Test 1&lt;/option&gt;';
html+='&lt;option&gt;Test 2&lt;/option&gt;';
html+='&lt;option&gt;Test 3&lt;/option&gt;';
html+='&lt;option&gt;Test 4&lt;/option&gt;';
html+='&lt;option&gt;Test 5&lt;/option&gt;';
html+='&lt;/select&gt;';

<i> </i>//ADD
<i> </i>var el = document.getElementById("selectMenyPlaceholder");
<i> </i>el.innerHTML = html;
}

&lt;/script&gt;

&lt;div id="selectMenyPlaceholder"&gt;Select Menu Will Go Here&lt;/div&gt;
&lt;input type="button" value="Click Me" onclick="createMenu()" /&gt;
&lt;/body&gt;
&lt;/html&gt;


Drew
Copy linkTweet thisAlerts:
@ruchi_bhindwaleauthorJan 25.2008 — YIPPPPPEEEEEEEEEEEEEEEE...... It worked?

Hey thanks a tonnnnnnnnnnnn for all the effort. Sorry to have bothered you so much but I still don't get why was the code not working on my browser

Maybe some compatibility issues. I hadn't used innerHTML before , got to know more about it too ?

Once again.. Really thankful to you for helping me out... Thanks and have a great time?
Copy linkTweet thisAlerts:
@cgishackJan 25.2008 — no problem..it was probably just a browser issue.

I dont have IE6 so i was not able to test.

Drew
×

Success!

Help @ruchi_bhindwale spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...