...

View Full Version : Setting the Value of a Drop Down Box



jason_kelly
10-05-2011, 07:00 PM
Hello,

I need your help.

I have the following drop-down box as an example:

[== FRUITS ==]
apples
oranges
pairs
kiwi
lemon

How can I use the code below to set the value of the drop down without knowing its value number (3)?

document.getElementById('BOX1').value = 'pairs'

Much thanks and appreciation for everyones help.

Cheers,

J

Philip M
10-05-2011, 07:04 PM
I am afraid that I do not understand what you want to do. You seem to not want to use the selectedIndex. Do you want to capture the value or the text of the select list option? What do you mean by "set the value of the drop down"? Where does BOX1 fit in? Please explain your objective more clearly, with an example.

The selectedIndex of "pairs" (the third item in your list) is 2, not 3, as the count starts from 0.

BTW the fruit is spelled "pears". "Pairs" means couples, twos. That is called a homophone.

jason_kelly
10-05-2011, 07:26 PM
Hi Phil,

What i'd like to do is specify the text value of what to get in the drop down box:

Ex.

Var TextToLookFor = "pears"

Then get its selectedIndex (2) from the drop down box (because my database doesnt recognize the value as a number, rather as a text value)

Use the selectedIndex to select it from drop down box.

Thats it,

Although it sounds complicated.

Cheers,

J

Philip M
10-05-2011, 07:35 PM
This looks to be what you want:-


<html>
<head>

<script type = "text/javascript">
function get_position(option_name) {
// alert (option_name);
var flag = false;
for (var i=0;i<=document.getElementById("list1").options.length-1;i++) {
if (document.getElementById("list1").options[i].value == option_name) {
alert (option_name + " is item No. " + (i+1) + " in the option list");
flag = true;
}
}
if (!flag) {
alert (option_name + " was not found");
}
}

</script>

</head>

<body>

<form name='myform'>
<select name = 'list1' id = 'list1' onchange = "document.myform.option_name.value = this.value">
<option selected value=""> Choose A Fruit</option>
<option value='Mango'> Mango </option>
<option value='Apple'> Apple </option>
<option value='Orange'> Orange </option>
<option value='Watermelon'> Watermelon </option>
<option value='Plum'> Plum </option>
<option value='Papaya'> Papaya </option>
<option value='Strawberry'> Strawberry </option>
<option value='Banana'> Banana </option>
<option value='Peach'> Peach </option>
<option value='Pear'> Pear </option>
</select>
<br>
<input type = "text" id = "option_name">
<input type = "button" value = "Get Position" onclick = "get_position(option_name.value)"

</form>

</body>
</html>

Note that spelling and capitalisation must be exact. pear != Pear That can be fixed if required.


function get_position(option_name) {
option_name = option_name.toLowerCase(); // convert to lower case for comparison
var flag = false;
for (var i=0;i<=document.getElementById("list1").options.length-1;i++) {
if (document.getElementById("list1").options[i].value.toLowerCase() == option_name) {
option_name = option_name.substr(0, 1).toUpperCase() + option_name.substr(1, option_name.length - 1); // restore capitalisation
alert (option_name + " is item No. " + (i+1) + " in the option list");
flag = true;
}
}
if (!flag) {
alert (option_name + " was not found");
}
}

If you want to work with the option text rather than the option value change
if (document.getElementById("list1").options[i].value.toLowerCase() == option_name) {
to
if (document.getElementById("list1").options[i].text.toLowerCase() == option_name) {


Don't confuse the position in the list (starting at 1) with the selectedIndex (starts at 0).

Why are pears plural but kiwi and lemon singular? Pears != Pear That inconsistency is bound to cause problems.

jason_kelly
10-05-2011, 08:35 PM
Hi Phil,

Thanks for your code,

I've implemented now, but now I get the error message "plum not found"

I can't seem to find anything wrong with this code?



<html>
<head>

<script type = "text/javascript">
function get_position(option_name) {
// alert (option_name);
var flag = false;
for (var i=0;i<=document.getElementById("list1").options.length-1;i++) {
if (document.getElementById("list1").options[i].value == option_name) {
alert (option_name + " is item No. " + (i+1) + " in the option list");
flag = true;
}
}
if (!flag) {
alert (option_name + " was not found");
}
}

function load_it(){
var dtype = new Array()
dtype[0] = "Select..."
dtype[1] = "mango"
dtype[2] = "orange"
dtype[3] = "watermelon"
dtype[4] = "plum"
dtype[5] = "papaya"
dtype[6] = "strawberry"
dtype[7] = "Banana"
dtype[8] = "Peach"
dtype[9] = "Pear"

for (i=0; i<dtype.length; i++) { document.getElementById('list1').options[i]=new Option(dtype[i], i) }
}


</script>

</head>

<body onload=load_it()>

<input type = "button" value = "Get Position" onclick = "get_position('plum')"

</form>

<p><select size="1" name="list1"></select></p>

</body>
</html>

Philip M
10-05-2011, 09:01 PM
Well, the code works fine for me. You are trying to match the option value instead of the option name. I explained this already.

if (document.getElementById("list1").options[i].text == option_name) {

blaze4218
10-05-2011, 09:02 PM
Try this:


<html>
<head>

<script type = "text/javascript">
function get_position(option_name) {
// alert (option_name);
var flag = false;
for (var i=0;i<=document.getElementById("list1").options.length-1;i++) {
if (document.getElementById("list1").options[i].value == option_name) {
alert (option_name + " is item No. " + (i+1) + " in the option list");
flag = true;
}
}
if (!flag) {
alert (option_name + " was not found");
}
}

function load_it(){
var dtype = new Array()
dtype[0] = "Select..."
dtype[1] = "mango"
dtype[2] = "orange"
dtype[3] = "watermelon"
dtype[4] = "plum"
dtype[5] = "papaya"
dtype[6] = "strawberry"
dtype[7] = "Banana"
dtype[8] = "Peach"
dtype[9] = "Pear"

for (i=0; i<dtype.length; i++) { document.getElementById('list1').options[i]=new Option(dtype[i], dtype[i]) }
}


</script>

</head>

<body onload=load_it()>

<input type = "button" value = "Get Position" onclick = "get_position('plum')"

</form>

<p><select size="1" name="list1"></select></p>

</body>
</html>

Changes from original code are in red

Philip M
10-05-2011, 09:06 PM
Yes, that will give each option a value as well as a text. Then the original code will work. But the OP specified
"What i'd like to do is specify the text value of what to get in the drop down box:"

blaze4218
10-05-2011, 09:08 PM
Oh, I was only answering the last post...


I can't seem to find anything wrong with this code?

But I hadn't notice that you had already chimed in.

jason_kelly
10-05-2011, 11:21 PM
Thanks Blaze and Phil.

Ok so heres the code below to make it all come together however, plum is off by one, it displays position 5 instead of what should be 4.

How would you correct the code below to tie it all together now?

document.getElementById('list1').selectedIndex.value = get_position('plum')



<html>
<head>

<script type = "text/javascript">
function get_position(option_name) {
// alert (option_name);
var flag = false;
for (var i=0;i<=document.getElementById("list1").options.length-1;i++) {
if (document.getElementById("list1").options[i].value == option_name) {
alert (option_name + " is item No. " + (i+1) + " in the option list");
flag = true;
}
}
if (!flag) {
alert (option_name + " was not found");
}
}

function load_it(){
var dtype = new Array()
dtype[0] = "Select..."
dtype[1] = "mango"
dtype[2] = "orange"
dtype[3] = "watermelon"
dtype[4] = "plum"
dtype[5] = "papaya"
dtype[6] = "strawberry"
dtype[7] = "Banana"
dtype[8] = "Peach"
dtype[9] = "Pear"

for (i=0; i<dtype.length; i++) { document.getElementById('list1').options[i]=new Option(dtype[i], i) }
}

function test(){

document.getElementById('list1').value = get_position('plum')


}


</script>





</head>

<body onload=load_it()>

<input type = "button" value = "Get Position" onclick = "test()"

</form>

<p><select size="1" name="list1"></select></p>

</body>
</html>


Sorry to be such a pest, im still somewhat new to javascript coding.

Cheers

J

jason_kelly
10-05-2011, 11:48 PM
After doing some intese Googling I stumbled upon this code and was able to modify it.



function test(){

for( var i = document.getElementById('list1').options.length-1;i>=0; i-- ) {

if(document.getElementById('list1').options[i].value == 'plum') {

document.getElementById('list1').selectedIndex=i;
}

}

}


Problem solved.

Thanks again for everyones help.

Cheers,

J

Philip M
10-06-2011, 07:29 AM
Ok so heres the code below to make it all come together however, plum is off by one, it displays position 5 instead of what should be 4.


I have already pointed out

Don't confuse the position in the list (starting at 1) with the selectedIndex (starts at 0).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum