Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    178
    Thanks
    138
    Thanked 0 Times in 0 Posts

    Setting the Value of a Drop Down Box

    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

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,733
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    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.
    Last edited by Philip M; 10-05-2011 at 07:16 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    178
    Thanks
    138
    Thanked 0 Times in 0 Posts
    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

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,733
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    This looks to be what you want:-

    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");
    }
    }
    
    </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.

    Code:
    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.
    Last edited by Philip M; 10-05-2011 at 07:57 PM. Reason: Improved

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Posts
    178
    Thanks
    138
    Thanked 0 Times in 0 Posts
    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?

    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>

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,733
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    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) {

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    Try 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], 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

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,733
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    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:"

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #9
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    Oh, I was only answering the last post...
    Quote Originally Posted by jason_kelly View Post
    I can't seem to find anything wrong with this code?
    But I hadn't notice that you had already chimed in.

  • #10
    Regular Coder
    Join Date
    Sep 2011
    Posts
    178
    Thanks
    138
    Thanked 0 Times in 0 Posts

    Unhappy

    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')

    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) }
    }
    
    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
    Last edited by jason_kelly; 10-05-2011 at 11:38 PM.

  • #11
    Regular Coder
    Join Date
    Sep 2011
    Posts
    178
    Thanks
    138
    Thanked 0 Times in 0 Posts
    After doing some intese Googling I stumbled upon this code and was able to modify it.

    Code:
    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

  • #12
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,733
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by jason_kelly View Post
    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).

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •