Select dropdown value equal to php variable using javascript

Question

I'm trying to select the value, of the dropdown called "Type", that's equal to the value of the PHP variable called "$Type" by using Javascript. I know there is a "selectindex" funciton in JS but "$Type" doesn't contain numbers only text.

I tried to use a loop I found on this site, but that didn't work for me.

PHP:

while(list($ArtikelID, $Type) = mysql_fetch_array($result))
{
  $arid = $ArtikelID;
  $te = $Type;
}

HTML + JS:

<form name="send" method="post" action="editartticlesdef.php">
    articlenumber: </br>
    <input readonly="readonly" name="ArticleID" value=<?php echo $arid ?>></br>
    Type: </br>
    <select name="Type" id="Type">
        <option value="Article">Article</option>
        <option value="Code">Code</option>
        <option value="News">News</option>
        <option value="Project">Project</option>
    </select></br>
<script>
    window.onload = function SelectType() 
    {
        var sel = document.getElementById('Type');
        var val = document.getElementById('<?php echo $te; ?>');
        for(var i = 0, j = sel.options.length; i < j; ++i) 
        {
            if(sel.options[i].innerHTML === val) 
            {
               sel.selectedIndex = i;
               break;
            }
        }
    }
</script>

</form>

I'm not using Ajax or Jquery, so that's why I tried to use the loop. But it doesn't work for some reason. The dropdown still selects the first option on default when loaded.

You don't need javascript to show value selected. You can write condition to set attribute `selected` — Rayon, Oct 15 '15 at 10:01

score 1 · Accepted Answer · edited Oct 15 '15 at 10:32

1

you can do it this way, using PHP.

<?php
$listArticle = array(
                'Article',
                'Code',
                'News',
                'Project'
            );
?>
<select name="Type" id="Type">
    <?php    
    foreach($listArticle as $article)
    {
        $selected = '';
        if($article == $te)
        {
            $selected = 'selected="selected"';
        }

        echo '<option '.$selected.'>'.$article.'</option>';
    }
    ?>
</select></br>

edited Oct 15 '15 at 10:32

BadAtPHP

102
3
20

answered Oct 15 '15 at 10:12

ThinkTank

1,187
9
15

This works! I had to edit a little bit though, you forgot a ; and your if loop should been "$te" instead of "$Type". So I edited your answer but it worked. Thank you! – BadAtPHP Oct 15 '15 at 10:32
Yes, thanks for correcting it. I just approved your modifications. – ThinkTank Oct 15 '15 at 10:33

score 0 · Answer 2 · answered Oct 15 '15 at 10:11

0

The index referred to in selectedIndex for a select menu is an integer referring to the option item index in the menu - not the value contained therein.

For the javascript, try:

 if( sel.options[ sel.options.selectedIndex ].value === val ){
      sel.selectedIndex = i;
      break;
 }

answered Oct 15 '15 at 10:11

Professor Abronsius

33,063
5
32
46

Doesn't work either, it still will show the very first option of the dropdown when it loads. – BadAtPHP Oct 15 '15 at 10:23

score 0 · Answer 3 · edited May 23 '17 at 12:14

0

You don't need the for loop at all, instead do (based on this):

window.onload = function SelectType() 
    {
        var sel = document.getElementById('Type');
        var val = document.getElementById('<?php echo $te; ?>');
        sel.value = val;
    }

This require the val to be presented in the options.

edited May 23 '17 at 12:14

Community

1
1

answered Oct 15 '15 at 10:14

Tareq

5,283
2
15
18

I tried your code, it causes my dropdown to become blank. – BadAtPHP Oct 15 '15 at 10:18
Well, as I said, the options must have one value the same as val. otherwise it would cause the select to become blank – Tareq Oct 15 '15 at 14:18

Select dropdown value equal to php variable using javascript

3 Answers3