CODEWITHSUNDEEP
phpjqueryhtml
Johnny Craig
Johnny Craig

Reputation: 5000

setting Select value on page load

Many instances when I have html like this, i follow it with jquery to set the value. However I feel this is not the best way to do it and was looking for alternatives.

 <select class='papertype' name='papertype'>
      <option value='glossy'>Glossy</option>
      <option value='matte'>Matte</option>
      <option value='luster'>Luster</option>
      <option value='metallic'>Metallic</option>
 </select>

$(document).ready(function(){
    $('.papertype').val('<?php print $image->paper_type; ?>');
}

Im hoping to do this without using any type of javascript, completely server side. An important factor thats causing the problem is that the page I am coding right now has multiple instances of .papertype, all of which will have different values. Thanks for any help!

Upvotes: 2

Views: 6223

Answers (7)

Phiter
Phiter

Reputation: 14982

I have created my own implementation for this, because I think adding an if/ternary in every option is ugly as hell.

It looks kinda like this:

jQuery solution:

$("select[data-svalue]").each(function(){
    $(this).val($(this).data('svalue')).trigger('change'); //I trigger change because of select2, but if you don't use any plugins for select, you won't need it here.
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-svalue="3">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

I didn't wrap it around $(document).ready() because I put it at the end of my file, and the .ready had a small delay, whereas without it the change was instant.

Javascript only solution:

document.querySelectorAll('select[data-svalue]').forEach(function(el){
  el.value = el.dataset.svalue;
})
<select data-svalue="3">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

If you want to support older versions of Internet Explorer(<11) you can add this to the your code, or simply use for instead of forEach.

if ( !Array.prototype.forEach ) {
  Array.prototype.forEach = function(fn, scope) {
    for(var i = 0, len = this.length; i < len; ++i) {
      fn.call(scope, this[i], i, this);
    }
  };
}

Upvotes: 0

Galled
Galled

Reputation: 4206

I recommend you use double quotes for HTML attributes as standard (only for readability). You can try with:

<?php
    $sPaperType = $image->paper_type;
?>

<select class="papertype" name="papertype">
      <option value="glossy" <?php if($sPaperType==="glossy") echo 'selected="selected"' ?>) ?> >Glossy</option>
      <option value="matte" <?php if($sPaperType==="matte") echo 'selected="selected"' ?>) ?>>Matte</option>
      <option value="luster" <?php if($sPaperType==="luster") echo 'selected="selected"' ?>) ?>>Luster</option>
      <option value="metallic" <?php if($sPaperType==="metallic") echo 'selected="selected"' ?>) ?>>Metallic</option>
 </select>

Then, I consider that you should not refuse to use this:

$(document).ready(function(){
    $(".papertype").val("<?php echo $sPaperType; ?>");
}

because Firefox and IE by default are differents with the managing of the cache.

Upvotes: 0

Smamatti
Smamatti

Reputation: 3931

You can set the attribute selected on an option element depending on your paper_type.

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324800

<?php
$options = Array(
    'glossy' => 'Glossy',
    'matte' => 'Matte',
    'luster' => 'Luster',
    'metallic' => 'Metallic'
);
echo "<select class='papertype' name='papertype'>";
foreach($options as $k => $v) {
    echo "<option value='$k'";
    if( $image->paper_type == $k) echo " selected";
    echo ">$v</option>";
}
echo "</select>";
?>

Something like that?

Upvotes: 4

Quasdunk
Quasdunk

Reputation: 15230

 <select class='papertype' name='papertype'>
      <option value='glossy' <?php echo ($image->paper_type == 'glossy' ? ' selected="selected"' : ''); ?>>Glossy</option>
      <option value='matte' <?php echo ($image->paper_type == 'matte' ? ' selected="selected"' : ''); ?>>Matte</option>
      <option value='luster' <?php echo ($image->paper_type == 'luster' ? ' selected="selected"' : ''); ?>>Luster</option>
      <option value='metallic' <?php echo ($image->paper_type == 'metallic' ? ' selected="selected"' : ''); ?>>Metallic</option>
 </select>

Of course, you can do that in a more elegant way on a higher abstraction level with arrays etc., but you get the idea.

Upvotes: 4

Shalmezad
Shalmezad

Reputation: 475

Best bet is by using:

<option value="glossy" selected="selected">

Since you want it server side using php, you'll have to use an if/else if block to determine which one will be selected by default.

Upvotes: 0

plandolt
plandolt

Reputation: 1931

You may use php to set the selected="selected" attribute to one of your option element.

<option value="<?php echo $data['key']; ?>"<?php if($data['key'] == $selectedKey) : ?> selected="selected"<?php endif; ?>><?php echo $data['value']</option>

Upvotes: 1

Related Questions