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
– Rayon, Commented Oct 15, 2015 at 10:01

BadAtPHP · Accepted Answer · 2015-10-15 10:32:56Z

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, 2015 at 10:32

BadAtPHP

1023 silver badges20 bronze badges

answered Oct 15, 2015 at 10:12

ThinkTank

1,1919 silver badges15 bronze badges

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

2 Comments

BadAtPHP Over a year ago

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!

ThinkTank Over a year ago

Yes, thanks for correcting it. I just approved your modifications.

Professor Abronsius · Accepted Answer · 2015-10-15 10:11:23Z

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, 2015 at 10:11

Professor Abronsius

33.9k5 gold badges36 silver badges49 bronze badges

1 Comment

BadAtPHP Over a year ago

Doesn't work either, it still will show the very first option of the dropdown when it loads.

Community · Accepted Answer · 2017-05-23 12:14:42Z

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, 2017 at 12:14

CommunityBot

11 silver badge

answered Oct 15, 2015 at 10:14

Tareq

5,3732 gold badges18 silver badges18 bronze badges

2 Comments

BadAtPHP Over a year ago

I tried your code, it causes my dropdown to become blank.

Tareq Over a year ago

Well, as I said, the options must have one value the same as val. otherwise it would cause the select to become blank

Collectives™ on Stack Overflow

Select dropdown value equal to php variable using javascript

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related