Select <option> <select> 和 javascript

Question

我做了一个表格，它引用了另一个表格，returns 一个 variable。默认情况下，我会将此变量用于 select <option>，ID（或名称）等于我放入第二种形式的 <select> 标记中的 <option> .

例如，如果form_1returnstype_option=选项2，我想要放 <option value="option2" selected>Option2</option>.

我想我必须使用javascript，但我对此一无所知。

我尝试使用此代码，但它不起作用。

<?php
    echo '<form id="form_1"><input type="hidden" name="type_option" value="option1"><br>';
    echo '<input type="submit" value="Submit"></form>';
    if (isset($_POST['type_option']))
    {
        echo '<form id="form_2">';
        echo '<script>$(\'select[name="options"]\').find(\'option[value="'.$type_option.'"]\').attr("selected",true);</script>';
        echo '<select id="type" name="type">';
        echo '<option value="option1">Option1</option>';
        echo '<option value="option2">Option2</option>';
        echo '</select>';
        echo '</form>';
    }
?>

感谢您的帮助。

Answer 1

对于 select 通过 js 处理任何元素，您可以使用 document.getElementById。例如 -:

<body>

<script>
function addRow()                               
    {
var tbl = document.getElementById('table1');    


var lastRow = tbl.rows.length;              
    var iteration = lastRow - 1;                
    var row = tbl.insertRow(lastRow);



    var firstCell = row.insertCell(0);                      
    var el = document.createElement('input');               
    el.type = 'number';                                     
    el.name = 'roomno' + i;                                     
    el.id = 'roomno' + i;                   
    el.size = 1;                                
    el.maxlength = 1;                           
    firstCell.appendChild(el);

}
</script>

<table  id="table1">

 <tr>   </tr>
</table>

<input type="button" value="Add Room" onclick="addRow();" style="background-color:#0CC; height:60px; width:90px"/>

</body>

上面的脚本select table with id table1 via js and add a row with textbox inside.

Answer 2

您应该在表单后回显脚本。我也对脚本进行了更改。试试看，让我知道发生了什么。

<?php
    echo '<form method="post"><input type="hidden" name="type_option" value="option1"><br>';
    echo '<input type="submit" value="Submit"></form>';
    if (isset($_POST['type_option']))
    {
        $type_option = $_POST['type_option'];
        echo '<form method="post">';            
        echo '<select id="type" name="type">';
        echo '<option value="option1">Option1</option>';
        echo '<option value="option2">Option2</option>';
        echo '</select>';
        echo '</form>';
        echo "<script> $(function(){ $('#type').val('$type_option'); })</script>";
    }
?>

Answer 3

（已编辑）

好的，既然我们已经确认您正在使用 jQuery，jQuery.val 是您从下拉列表中选择选项的朋友。

这是您的示例，重构了一些 PHP 代码，因此您不必转义那么多引号：

<form method="post" id="form_1"><input type="hidden" name="type_option" value="option1"><br>
<input type="submit" value="Submit"></form>
<?php
    if (isset($_REQUEST['type_option']))
    {
      $type_option = $_REQUEST['type_option'];
?>
<form id="form_2" method="post">
<script>
  $(document).ready(function () {
    $('select[name="options"]').val("<?= $type_option ?>");
  });
</script>
<select id="type" name="options">'
<option value="option1">Option1</option>
<option value="option2">Option2</option>
</select>
</form>
<?php
    }
?>

变化

使 <option> 元素的 name 属性匹配您的 jQuery 选择器 $('select[name="options"]').
使用$_REQUEST而不是$_POST，因为前者从查询字符串（GET 请求）和post 数据（POST 请求）中捕获请求变量。
将 method="post" 添加到第一个 <form> 元素，因为您的示例需要 POST 请求。（如果您使用 $_REQUEST 而不是 $_POST，这实际上是不必要的。）
使用 $(document).ready() 确保您的 JavaScript 选择代码在浏览器实际创建下拉元素时执行。

另见

Change the selected value of a drop-down list with jQuery

Answer 4

以下代码适合您。

    <?php
        echo '<form id="form_1"><input type="hidden" name="type_option" value="option1"><br>';
        echo '<input type="submit" value="Submit"></form>';
        if (isset($_REQUEST['type_option']))
        {
            echo '<form id="form_2">';
            echo '<select id="type" name="type">';
            echo '<option value="option1">Option1</option>';
            echo '<option value="option2">Option2</option>';
            echo '</select>';
            echo '</form>';
    ?>
        <script type="text/javascript">
        $(document).ready(function($) {
            $('select[name="type"]  option[value="<?php echo $type_option ?>"]').attr("selected","selected");
         });    
        </script>
   <?php
        }
    ?>

确保 jQuery 必须在脚本之前加载！

Select <option> <select> 和 javascript

Select an <option> in <select> with javascript

javascript

select

option

（已编辑）

变化

另见