Selecting an option value with Javascript, using PHP

Question

Ok, so here is my code. I am trying to select a picklist value using Javascript, from PHP (I do not want a direct method to do this with PHP, as this won't work for my particular program)

Here's the code:

ECHO '<script type="text/javascript">
    var pl = document.getElementById("cultpicklist");
 pl.options[37].selected = true;
 </script>';

However when I try to run this, it does not seem to work and it says pl.options[37] is undefined.

What am I doing wrong?

Note, there is a multiple select list which has an option with a value of 37.

EDIT: I seem to get this error or warning message:

Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementById() instead.
admin.php?org=7()admin.php?org=7 (line 68)
pl.options[37].selected = true;

Here's the relevant HTML:

<fieldset><label for="culture">Culture:</label>
        <select name="culture[]" multiple="multiple" id="cultpicklist"><?php
    while ($cultrow = mysql_fetch_array($rescult)) {
        ECHO '<option name="culture[]" value="'. stripslashes($cultrow['cult_id']) .'">'. stripslashes($cultrow['cult_desc']) .'</option>';
    }
    ?>
        </select></fieldset>

Here's the generated HTML code:

<select id="cultpicklist" multiple="multiple" name="culture[]">
<option value="36" name="culture[]">test1</option>
<option value="37" name="culture[]">test2</option>
<option value="38" name="culture[]">test3</option>
<option value="39" name="culture[]">test4</option>
</select>

Make sure that code is executed after the select list is created. — Ryan Pendleton
– Ryan Pendleton, Commented Nov 28, 2011 at 18:36
It should be. It's at the bottom, and only runs when a button is pressed. — Ryan Schafer
– Ryan Schafer, Commented Nov 28, 2011 at 18:43

user898741 · Accepted Answer · 2011-11-28 18:46:24Z

3

The index of the options IS NOT the value of the option. When you use pl.options[37] you saying to JS to get the thirty-seventh option in the select and not the option with the value 37.

Try this:

<script type="text/javascript">
    var pl = document.getElementById("cultpicklist");
    for(var i=0; i<pl.options.length;i++) {
        if(pl.options[i].value == "") { // Between the quotes you place the comparison value!
            pl.options[i].selected = true;
        }
    }
</script>

BTW: If you already use jQuery on your page it's more correct to use it's functions, but if you don't use jQuery is too much code to add to your page just to change a select value.

answered Nov 28, 2011 at 18:46

user898741

Sign up to request clarification or add additional context in comments.

Comments

Diodeus - James MacFarlane · Accepted Answer · 2011-11-28 18:35:46Z

1

You are likely putting the cart before the horse. You cannot use JavaScript to manipulate DOM elements until they've been rendered in the browser.

Put your script AFTER your HTML or check to see of the DOM is ready before running your script.

answered Nov 28, 2011 at 18:35

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

3 Comments

Ryan Schafer Over a year ago

My script is after my HTML. This script is at the bottom of the page, after the HTML has been rendered.

Mathieu Dumoulin Over a year ago

Very true, ohhhh so many times did i place JS before the DOM loaded. That was before Jquery existed tho :)

Diodeus - James MacFarlane Over a year ago

OK, please post your HTML so we can take a look.

Mathieu Dumoulin · Accepted Answer · 2011-11-28 18:36:38Z

0

Why not use JQuery first of all...

$('#cultpicklist').val('myvaluetoselect');

Is MUCH easier to code, read and works instead of using bulky old school javascript...

answered Nov 28, 2011 at 18:36

Mathieu Dumoulin

12.3k7 gold badges47 silver badges71 bronze badges

4 Comments

Ryan Schafer Over a year ago

Trying not to use any external scripts as I'm not sure they're allowed or desired.

david Over a year ago

@MathieuDumoulin jquery is great, but not bulky? wake up to your self

Mathieu Dumoulin Over a year ago

Bulky in terms of amount of code to write, sure the 31kb minified version of Jquery is quite BULKY to download but helps in making things easier. Thank you for pointing out how bad you understood my answer. It was my pleasure to enlighten you.

Ryan Schafer Over a year ago

Hey, please no fighting? I deeply want to get this solved, not be a forum for whether plain Javascript or jQuery is better. I have heard arguments back and forth ad infinantum.

Josh Ferrara · Accepted Answer · 2011-11-28 18:39:44Z

0

Using jQuery, you could still put your code in between <head></head> tags. You would use $(document).ready() thus executing your code after the whole document has rendered.

answered Nov 28, 2011 at 18:39

Josh Ferrara

7672 gold badges9 silver badges26 bronze badges

Collectives™ on Stack Overflow

Selecting an option value with Javascript, using PHP

4 Answers 4

Comments

3 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related