2016-10-16 59 views
1

我使用Materialise CSS作为我的CSS框架,我也浪费了1个小时在google/stackoverflow中搜索答案等。但我似乎无法找到解决此问题的答案。所以,我在做什么是我试图通过选择1的值来选择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> 

预先感谢那些谁将会回答和帮助我!

+0

显示渲染html。 – BenG

+0

@GentiSaliu你好,你是什么意思? value属性中的变量不是空的。我通过将它们放在alert()1上来检查它们。看来问题不在那里,而是在我的js代码中。 – Akio

+0

@BenG更新,请检查 – Akio

回答

2

使用事件代表团听取有关Accounts变化选择,而不是:

$("#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

Materialise CSS在呈现其组件时会对DOM做很多修改,有时会在零件中断时对UI元素进行直接的JavaScript操作。

+1

Oml。这解决了我的问题! Tysm!我也意识到这个问题在实现,但我似乎无法找到答案。再次感谢您的帮助!荣誉! – Akio

+0

实际上,如果使用事件委派,则不需要重新初始化选择。稍后更新我的答案。 –

相关问题