Set selected on options using PHP / JS

Question

I have a list of ~80 option values, I know there must be an easy way to do this with javascript, would anyone be willing to spare me a moment of their time?

First and foremost, $sid is a get variable pulled from the url (whatever.php?sid=CR01)

Sadly, all option values are hard coded -__- inherited this project

<select name="siteid"  size="15">
    <option value="CR01" <?php if ($sid == 'CR01') { echo 'selected="selected"';} ?>>
         CR01 (Crooked Run @ Lake Frederick Dam)
    </option>
<option value="'CR02'">CR02 (Nineveh Spring)</option>
<option value="'CR03'">CR03 (Crooked Run @ Rt 639 bridge)</option>
<option value="'CR04'">CR04 (McKay Spring)</option>
<option value="'CR05'">CR05 (Crooked Run @ Cabin Ct)</option>
(etc etc etc)
</select>

What do you want to do with javascript? Could you be a little more specific? — zahirdhada
– zahirdhada, Commented Aug 22, 2013 at 6:17
possible duplicate of HTML Select Box: set the option on selected with help PHP — kumarharsh
– kumarharsh, Commented Aug 22, 2013 at 6:19
What you have done is probably the best solution for retaining the selected value since you are getting value $sid. If the list was populated using jquery/javascript then probably jquery would be easy way. — Roy M J
– Roy M J, Commented Aug 22, 2013 at 6:19
Off topic, but maybe it would be a good idea if you implemented jquery chosen for your multiple select, because is always a better user experience => harvesthq.github.io/chosen — Federico J.
– Federico J., Commented Aug 22, 2013 at 21:39

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

oh yes ofcourse there is an easy way.

IN PHP

$opts = array(
    'CR01' => '...',
    'CR02' => '...',
    ....
);

<select name="siteid">
<?php foreach( $opts as $var => $opt ): ?>
  <option 
    value="<?php echo $var ?>"
    <?php if( $var == $sid ): ?>selected="selected"<?php endif; ?> >
   <?php echo $opt ?>
  </option>
<?php endforeach; ?>
</select>

IN JS

VANILLA

function setOption(selectElement, value) {
  var options = selectElement.options;
  for (var i = 0, optionsLength = options.length; i < optionsLength; i++) {
    if (options[i].value == value) {
        selectElement.selectedIndex = i;
        return true;
    }
  }
  return false;
}
setOption(
  document.querySelector('select[name='siteid']'),
  "<?php echo $sid; ?>"
);

as described here

JQUERY

$("select[name='siteid'] option[value='<?php echo $sid; ?>']").prop('selected', true)

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 22, 2013 at 6:21

kumarharsh

19.7k8 gold badges77 silver badges102 bronze badges

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

6 Comments

Michael Roach Over a year ago

Sadly all the options are coded out in html and not in an array ><

Michael Roach Over a year ago

It's grabbing the variable, but it isn't doing anything on the front end, did I misplace something? Here's the source: [link]pastebin.com/dfdPAqBS

kumarharsh Over a year ago

Your PHP code has an extra pair of quotes surrounding the option value value="'CR01'" Remove one pair. or use this: $("select[name='siteid'] option[value=\"'<?php echo $sid ?>'\"]")

kumarharsh Over a year ago

also, there was an error in my jquery code, the quotes were mixed up. Now it's ok.

Michael Roach Over a year ago

It still doesn't want to run, I'm about to face roll my keyboard and then just write php if/then

|

Federico J. · Accepted Answer · 2013-08-22 06:22:55Z

0

With Javascript? Why Js? I would use a PHP, to avoid repeating code. Assuming that you have all your options stored in an array, I would do:

<select name="siteid"  size="15">
    <?php foreach ( $options as $option ) : ?>
    <option value="'.$option['value'].'"<?php echo ($option['selected'] == 1) ? ' selected="selected"':''?>> <?php echo $option['label'] ?> </option>
    <?php endoreach; ?>
</select>

You should get the values from the database, with a sql wich marked a field named selected as 0 if it's not the id, or 1 if it is. This way, you save a crazy amount of coding

answered Aug 22, 2013 at 6:22

Federico J.

16k7 gold badges35 silver badges54 bronze badges

Collectives™ on Stack Overflow

Set selected on options using PHP / JS

2 Answers 2

IN PHP

IN JS

VANILLA

JQUERY

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

IN PHP

IN JS

VANILLA

JQUERY

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related