将选择值传递给另一个选择标记
Passing select value to another select tag
我使用Materialize CSS作为我的CSS框架,我还浪费了1小时在google/stackoverflow等搜索答案。但是我似乎找不到解决这个问题的答案。我要做的是把Select 1的值传递给Select 2。下面是我的代码
选择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>
选择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);
渲染选择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>
渲染选择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>
提前感谢那些将回答和帮助我的人!
使用事件委托来监听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);
});
查看jsFiddle的工作示例。
Materialize CSS在呈现组件时对DOM进行了大量修改,有时会对部分break中的UI元素进行直接的JavaScript操作。
相关文章:
- 我有多个复选框,并希望为其中 2 个制定规则,以便如果我选择 1 个,则无法选择另一个
- 从另一个日期选择器中选择另一个值后,获取日期选择器的起始值
- 在mvc4中选择另一个复选框时禁用复选框
- 如何在选择另一个列表框值时清除列表框值
- 在包含两个的Javascript数组中选择另一个元素
- 单击时更改表单选择选项并选择另一个选项
- 选择另一个单选按钮字段时重置单选按钮字段的最佳方法
- 带有数字的 Jquery 幻灯片 - 帮助让数字链接保持颜色,直到选择另一个链接
- 在 Angular JS 中选择另一个输入字段时禁用输入字段
- 选择另一个下拉列表时,Meteor 会动态筛选下拉列表
- 当使用 JQuery 和 ajax post 在表单中选择另一个下拉列表时更改下拉列表值
- 选择另一个对象应触发“之前:选择:清除”事件
- 在选择另一个选择字段时创建动态选择字段
- 使用javascript选择另一个选项后,循环隐藏选项不起作用
- 在Raphael中悬停时选择另一个路径对象
- Jquery在选择另一个图像时隐藏标题-包括jsFiddle
- AngularJS:如何在选择另一个跨度时取消选择跨度
- 为什么当我选择另一个文件并提交时,会发送另一个带有旧文件的请求
- 如何从一个jsp页面中获取选项标签名称来选择另一个jsp页的标签
- 下拉菜单在选择另一个值时没有更新