使用JavaScript选择等于php变量的下拉值

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.

Answer 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>

Answer 2

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;
 } 

Answer 3

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.