Question

我正在尝试创建一个html选择框，根据用户在不同的选择框中输入的内容动态禁用和启用...当我只使用html时这工作正常，但我想使用jQuery插件选择为此，它不起作用......我需要做的主要事情是根据另一个选择框的onchange选择禁用或启用更新。选择这可能吗？如何？非常感谢。

以下是我的javascript：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>PROCapture Marketing | My Dashboard</title>
<link rel="stylesheet" type="text/css" href="../Style Sheets/PCMBackOffice-Styles.css">
<link href="../Style Sheets/headermenuhome.css" rel="stylesheet"><script type="text/javascript" src="../Scripts/jQuery1.7.1.js"></script>
<script src="../Scripts/instantiatemenu.js"></script>
<script>
function displayleads(str)
{
var xmlhttp;
if (str=="")
  {
  document.getElementById("fromleadstransfer").innerHTML="<option value=''>Select Leads To Transfer...</option>";
  document.getElementById("fromleadstransfer").disabled=true;
  return;
  } 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("fromleadstransfer").innerHTML=xmlhttp.responseText;
    if (document.getElementById("fromleadstransfer").value != "noleads") {
    document.getElementById("fromleadstransfer").disabled=false;
    } else {
    document.getElementById("fromleadstransfer").disabled=true;
    }
    }
  }
xmlhttp.open("GET","../Scripts/transferfromselect.php?system="+str,true);
xmlhttp.send();
}
</script>
<script>
function displayfolders(str2)
{
var xmlhttp;
if (str2=="")
  {
  document.getElementById("tofoldertransfer").innerHTML="<option value=''>Select Folder To Send Leads...</option>";
  document.getElementById("tofoldertransfer").disabled=true;
  return;
  } 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("tofoldertransfer").innerHTML=xmlhttp.responseText;
    document.getElementById("tofoldertransfer").disabled=false;
    }
  }
xmlhttp.open("GET","../Scripts/transfertoselect.php?system="+str2,true);
xmlhttp.send();
}
</script>
<link rel="stylesheet" type="text/css" href="../chosen/chosen2.css">
<script src="../chosen/jquery.js"></script>
<script src="../chosen/chosen.jquery.js"></script>
<script>
jQuery(document).ready(function(){
  jQuery(".fromleadstransfer").chosen();
  jQuery(".fromsystemtransfer").chosen();
  jQuery(".tofoldertransfer").chosen();
  jQuery(".tosystemtransfer").chosen();
  jQuery(".operationselect").chosen({disable_search_threshold: 3});
});

以下是表格：

<form method="post" name="transferleadsform">
    <div class="transferleftside">
    <div class="primarytransfercontainer">
    <span class="primarytransferspan">From:</span>
    <br>
    <div class="transferinnercontainer1"><label>Operation: </label>
    <select id="operationselect" name="operationselect" class="operationselect">
    <option value="Copy" selected="selected">Copy</option>
    <option value="Move">Move</option>
    </select></div>
    <br>
    <div class="transferinnercontainer2"><label>System: </label>
    <select name="fromsystemtransfer" class="fromsystemtransfer" id="fromsystemtransfer" onChange="displayleads(this.value)">
    <option value="">Select A System...</option>
    <?php
        foreach($systems as $systemid) {  
        ?>
        <option value="<?php echo $systemid?>"><?php echo $systemid?></option>
        <?php
        }
        ?>
    </select></div>
    <br>
    <div class="transferinnercontainer2"><label>Leads: </label>
    <select name="fromleadstransfer" multiple disabled="disabled" class="fromleadstransfer" id="fromleadstransfer">
    <option value="">Select Leads To Transfer...</option>
    </select></div>
    </div>
    </div>
    <div class="transferrightside">
    <div class="primarytransfercontainer">
    <span class="primarytransferspan">To:</span>
    <br>
    <div class="transferinnercontainer1"><label>System: </label>
    <select id="tosystemtransfer" name="tosystemtransfer" class="tosystemtransfer" onChange="displayfolders(this.value)">
    <option value="">Select A System To Send Leads...</option>
    <?php
        foreach($systems as $systemid) {
        ?>
        <option value="<?php echo $systemid?>"><?php echo $systemid?></option>
        <?php
        }
        ?>
    </select></div>
    <br>
    <div class="transferinnercontainer3"><label>Folder: </label>
    <select id="tofoldertransfer" name="tofoldertransfer" disabled="disabled" class="tofoldertransfer">
    <option value="">Select Folder To Send Leads...</option>
    </select></div>
    <br>
    <input type="submit" class="transferbutton TransferSprites" value="<< Transfer Leads >>">
    </div>
    </div>
    <div class="longdivider TransferSprites">
    </div>
    </form>

Answer 1

禁用该元素后，需要触发它的更新功能

$(element).prop('disabled', true).trigger("liszt:updated");

动态更新选择如果您需要更新选择字段中的选项并希望选择选择更改，则需要在该字段上触发“liszt：updated”事件。 Chosen将根据更新的内容重新构建自己。

jQuery Version: $("#form_field").trigger("liszt:updated");
Prototype Version: Event.fire($("form_field"), "liszt:updated");

动态禁用选择框不能使用选择

1 个答案: