javascript - 如何使用 JavaScript 更改选择标签的值？

Question

我有两页。“page1.php” “page2.php”

在 page1.php 中，

<a href="page2.php?c=Category1">Category1</a>
<a href="page2.php?c=Category2">Category2</a>
<a href="page2.php?c=Category3">Category3</a>

在 page2.php 中，

<?php
    $c=$_GET['c'];
    echo '<script>'
    , 'chgvalues("'.$c.'");'
    , '</script>';
?>
<select id="mySelect">
    <option>Category1</option>
    <option>Category3</option>
    <option>Category2</option>
</select>

在 chgvalues(c) 中，

function chgvalues(c)
{
    document.getElementById("mySelect").selected =true;
}

但这对我不起作用。我想做的是，当用户单击第 1 页上的链接时，第 2 页会自动设置选择值。

我认为我在这个chgvalues 函数中错了。

Answer 1

尝试

function chgvalues(c)
{
    document.getElementById("mySelect").value = c;
}

并且 call chgvaluesaftermySelect是 dom 的一部分。

为此，您可以简单地在标记中调用chgvaluesafter ，例如mySelect

<select id="mySelect">
<option>Category1</option>
<option>Category3</option>
<option>Category2</option>
</select>
<?php
$c=$_GET['c'];// sanitize etc
echo '<script>'
, 'chgvalues("'.$c.'");'
, '</script>';
?>

或者在 window.onload 中调用它，例如

<script>
    window.onload = function(){
        chgvalues("<?php echo $c; ?>");
    };
</script>

Answer 2

问题是“selected”属性适用于<option>标签，而不是<select>标签。其实只要把page2.php改成：

<?php $c = $_GET[c];?>
<select>
<option <?php if(c == "1"){echo "selected";}?>>Category1</option>
<option <?php if(c == "3"){echo "selected";}?>>Category3</option>
<option <?php if(c == "2"){echo "selected";}?>>Category2</option>
</select>

Answer 3

将 page2.php 更改为：

<select id="mySelect">
<option id="Category1">Category1</option>
<option id="Category3">Category3</option>
<option id="Category2">Category2</option>
</select>
<?php
$c=$_GET['c'];
echo '<script>'
, 'chgvalues("'.$c.'");'
, '</script>';
?>

您的脚本在选项位于 DOM 之前运行，并且选项上没有 ID，因此它们不匹配getElementById。

Answer 4

您可以将查询字符串值传递给 val 方法。

$("#mySelect").val("thevalue")

只需确保选项标签中的值与 val 方法中的值匹配即可。

Answer 5

尝试

在 page2.php

<?php
$c=$_GET['c'];
echo '<script>'
. 'chgvalues("'.$c.'");'
. '</script>';
?>
<select id="mySelect">
<option value='Category1'>Category1</option>
<option value='Category3'>Category3</option>
<option value='Category2'>Category2</option>
</select>

而在chgvalues(c)

function chgvalues(c)
 {
    document.getElementById("mySelect").value = true;
 }