Question

我有两个下拉菜单。我希望第二个下拉列表Assign值在选择第一个下拉列表中student的特定值时设置为null。

第一次下拉：

<select name="Reg">
  <option value="">Choose</option>
  <option value="admin">Admin</option>
  <option value="student">Student</option>
</select>

这是隐藏的第二个下拉列表，仅在选择值为Reg的{{1}}时显示。

admin

我尝试过以下操作，但它无法正常工作。

请帮助。

<select name="Assign"> 
  <option value="">Choose</option> 

<?php
$sql=odbc_exec($conn,'SELECT AssignCd, AssignNm FROM AssignList');
if(odbc_fetch_row($sql))
  {
    $AssignCd= odbc_result($sql, "AssignCd");
    $AssignNm= odbc_result($sql, "AssignNm");
    echo "<option value='".$AssignCd."'>".$AssignNm."</option>";
  } 
?>

</select>

更新：

选择if($("#Reg").val("student");) { $("#AssignCd").val(""); $("#AssignNm").val(""); }后，系统会自动选择Admin Assign。问题是当我将选项更改为admin is chosen时，未显示假定的值Student。

如何使student is chosen和Assign的{{1}}值保持不变，而不是在它们之间混淆？

这是我的代码：

fiddle

＆＃13;

Admin

＆＃13;

Student

＆＃13;

Answer 1

$('select[name="Reg"]').on('change', function() {})当您在select
$(this).find("option:selected").val() == "student"这会看到您是否选择了值为“学生”的option
$('select[name="Assign"] option[value="AssignCd"]').text("");这会将option的文本设置为值= AssignCd为空

我们可以在没有向您展示<select name="Assign">

生成的html的情况下走多远

$('select[name="Reg"]').on('change', function() {
  if ($(this).find("option:selected").val() == "student") {
    $('select[name="Assign"] option[value="AssignCd"]').text("");
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="Reg">
  <option value="">Choose</option>
  <option value="admin">Admin</option>
  <option value="student">Student</option>
</select>

<select name="Assign"> 
  <option value="AssignCd">AssignNm</option>
  
</select>

<强>更新

我认为没有必要使用.wrap()，请使用.hide() / .show()查看下面的示例。

$(document).ready(function() {
  $("#Reg").on("change", function() {
    if ($(this).find("option:selected").text() === 'Admin') {
      $("#Assign").show();
      $('select[name="Assign"] option[name="student_assign"]').attr("disabled", true).prop("selected", false).hide();
      $('select[name="Assign"] option[name="admin_assign"]').prop('selected', true);
    } else if ($(this).find("option:selected").text() === 'Student') {
      $('select[name="Assign"] option[name="student_assign"]').attr("disabled", false).prop("selected", true).show()
      $('select[name="Assign"] option[name="student_assign"]').prop('selected', true);
    } else {
      $("#Assign").hide().attr("disabled", " ");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<select name="Reg" id="Reg">
  <option value="">Choose</option>
  <option value="admin">Admin</option>
  <option value="student">Student</option>
</select>

<select name="Assign" id="Assign"> 
  <option value=" ">Choose</option> 
  <option name ="student_assign" value="student_assign">student is chosen</option>  
  <option name ="admin_assign" value="admin_assign">admin is chosen</option> 
</select>

Answer 2

<select name="Reg" id="Reg">
  <option value="">Choose</option>
  <option value="admin">Admin</option>
  <option value="student">Student</option>
</select>

首先，#<selector>用于选择ID为<selector>的Dom元素。您无法使用name属性和id选择器访问它们。

至于你的问题。您需要使用第一个下拉列表中的on change事件来确定第二个下拉列表的可见性。

<select name="Assign" id="Assign">
  <option value="">Choose</option>
  ....
  ....

$('#Assign').hide(); // first hide it so they cannot see it
$(document).on('change', '#Reg', function(e){
    if($(this).val()=='admin'){
        $('#Assign').show();
    }else{
        $('#Assign').val('').hide();
    }
})

JQuery：为选定的下拉值

2 个答案: