将 select 值传递给另一个 select 标签

Question

我正在使用 Materialize CSS 作为我的 CSS 框架，我也浪费了 1 小时在 google/Whosebug 等中寻找答案。但我似乎无法找到回答来解决这个问题。所以，我正在做的是尝试将 Select 1 的值传递给 Select 2。下面是我的代码

Select 1:

<select id="Accounts">
  <option value="">Choose Account to edit</option>
     <?php
        $query  = "SELECT * FROM personnel_list WHERE status = ?";
        $result = $this->db->query($query, array("Active"))->result_array();
        foreach ($result as $row) {
           extract($row);
           echo "<option value=\"$id-$name-$position-$status\">$name</option>";
        }
   ?>
</select>

Select 2:

<select id="editPosition">
    <option value="">Choose Position</option>
        <?php
            $Position = array("Manager", "Supervisor", "Assistant Manager", "Assistant Supervisor")
            for ($x=0; $x < count($Position); $x++) { 
                echo "<option value=\"$Position[$x]\">$Position[$x]</option>";
            }
        ?>
</select>
<label for="editPosition">Position:</label>

JS:

$("#Accounts").change(function(){
var accval  = $(this).val().split("-");
var id      = accval[0];
var name    = accval[1];
var post    = accval[2];
var status  = accval[3];

$("#editPosition").val(post);
})

我试过的其他JS是：

$("#editPosition option[value='"+post+"']").prop("selected", true);

已渲染 Select 1:

<select id="Accounts">
<option value="">Choose Account to edit</option>
<option value="1-John-Manager-Active">John</option><option value="2-Mark-Assistant Manager-Active">Mark</option>
</select>

已渲染 Select 2:

<select id="editPosition">
<option value="">Choose Position</option>
<option value="Manager">Manager</option>
<option value="Supervisor">Supervisor</option>
<option value="Assistant Manager">Assistant Manager</option>
<option value="Assistant Supervisor">Assistant Supervisor</option>
</select>

在此先感谢那些愿意回答和帮助我的人！

Answer 1

改为使用事件委托来侦听 Accounts select 上的更改：

$("#Accounts").on("change", function(){
    var accval  = $(this).val().split("-");
    var id      = accval[0];
    var name    = accval[1];
    var post    = accval[2];
    var status  = accval[3];

    $("#editPosition").val(post);
});

有关工作示例，请参阅 this jsFiddle。

Materialize CSS 在渲染其组件时对 DOM 进行了大量修改，有时会直接对 UI 元素进行 JavaScript 操作.

将 select 值传递给另一个 select 标签

Passing select value to another select tag

javascript

css

jquery

materialize