我在运行jQuery 1.3.2的服务器上异步加载了一些内容
我试图根据第一个选择中的值隐藏第二个选项中的选项。我已经能够通过下面的例子重现我的问题。
该示例在Firefox中运行良好。在Chrome中，在第一个选择中选择B将导致第二个选择的下拉选项变为空白。在IE中，根本没有选项隐藏。在Safari中，第二个选择将选择应该是可见选项的第一个选项，但应该隐藏的选项仍然可见。
这是我的jQuery代码中的问题吗？
这是一个熟悉的人的Jira小工具。这就是我使用.live("change", function())代替.change()的原因。
<html>
<body>
<div class="gadget">
<form action="localhost/promotedByTable/go">
<select id="projectId" name="projectId">
<option value="p-10100">A</option>
<option value="p-10200">B</option>
<option value="p-10300">C</option>
</select>
<select id="fixVersion" name="fixVersion">
<option value="10100-10400">1</option>
<option value="10100-10401">2</option>
<option value="10100-10402">3</option>
<option value="10100-10403">4</option>
<option value="10100-10404">5</option>
<option value="10100-10405">6</option>
<option value="10100-10406">7</option>
<option value="10100-10407">8</option>
<option value="10100-10408">9</option>
<option value="10100-10409">10</option>
<option value="10100-10410">11</option>
<option value="10100-10411">12</option>
<option value="10100-10412">13</option>
<option value="10100-10413">14</option>
<option value="10100-10414">15</option>
<option value="10100-10415">16</option>
<option value="10100-10416">17</option>
<option value="10100-10417">18</option>
<option value="10100-10418">19</option>
<option value="10100-10419">20</option>
<option value="10100-10420">21</option>
<option value="10100-10421">22</option>
<option value="10100-10422">23</option>
<option value="10100-10423">24</option>
<option value="10100-10424">25</option>
<option value="10100-10425">26</option>
<option value="10100-10426">27</option>
<option value="10100-10427">28</option>
<option value="10100-10428">29</option>
<option value="10100-10429">30</option>
<option value="10100-10430">31</option>
<option value="10100-10431">32</option>
<option value="10100-10432">33</option>
<option value="10100-10433">34</option>
<option value="10100-10434">35</option>
<option value="10100-10435">36</option>
<option value="10100-10436">37</option>
<option value="10100-10437">38</option>
<option value="10100-10438">39</option>
<option value="10100-10439">40</option>
<option value="10100-10440">41</option>
<option value="10100-10441">42</option>
<option value="10100-10442">43</option>
<option value="10100-10443">44</option>
<option value="10200-10500">1.0</option>
<option value="10200-10501">1.1</option>
<option value="10200-10502">1.2</option>
<option value="10200-10503">1.3</option>
<option value="10200-10504">1.4</option>
<option value="10200-10505">1.5</option>
<option value="10200-10506">1.6</option>
<option value="10200-10507">1.7</option>
<option value="10200-10508">1.8</option>
<option value="10200-10509">1.9</option>
<option value="10200-10510">1.10</option>
<option value="10200-10511">1.11</option>
<option value="10200-10512">1.12</option>
<option value="10200-10513">1.13</option>
<option value="10200-10514">1.14</option>
<option value="10200-10515">1.15</option>
<option value="10200-10516">1.16</option>
<option value="10200-10517">1.17</option>
<option value="10200-10518">1.18</option>
<option value="10200-10519">1.19</option>
<option value="10200-10520">1.20</option>
<option value="10200-10521">1.21</option>
<option value="10200-10522">1.22</option>
<option value="10200-10523">1.23</option>
<option value="10200-10524">1.24</option>
<option value="10200-10525">1.25</option>
<option value="10200-10526">1.26</option>
<option value="10200-10527">1.27</option>
<option value="10200-10528">1.28</option>
<option value="10200-10529">1.29</option>
<option value="10200-10530">1.30</option>
<option value="10200-10531">1.31</option>
<option value="10200-10532">1.32</option>
<option value="10200-10533">1.33</option>
<option value="10200-10534">1.34</option>
<option value="10200-10535">1.35</option>
<option value="10200-10536">1.36</option>
<option value="10200-10537">1.37</option>
<option value="10200-10538">1.38</option>
<option value="10200-10539">1.39</option>
<option value="10200-10540">1.40</option>
<option value="10200-10541">1.41</option>
<option value="10300-10600">3.1</option>
<option value="10300-10601">3.4</option>
<option value="10300-10602">3.7</option>
<option value="10300-10603">4</option>
<option value="10300-10604">4.3</option>
<option value="10300-10605">4.6</option>
<option value="10300-10606">4.9</option>
<option value="10300-10607">5.2</option>
<option value="10300-10608">5.5</option>
<option value="10300-10609">5.8</option>
<option value="10300-10610">6.1</option>
<option value="10300-10611">6.4</option>
<option value="10300-10612">6.7</option>
<option value="10300-10613">7</option>
<option value="10300-10614">7.3</option>
<option value="10300-10615">7.6</option>
<option value="10300-10616">7.9</option>
<option value="10300-10617">8.2</option>
<option value="10300-10618">8.5</option>
<option value="10300-10619">8.8</option>
<option value="10300-10620">9.1</option>
<option value="10300-10621">9.4</option>
<option value="10300-10622">9.7</option>
<option value="10300-10623">10</option>
<option value="10300-10624">10.3</option>
<option value="10300-10625">10.6</option>
<option value="10300-10626">10.9</option>
<option value="10300-10627">11.2</option>
<option value="10300-10628">11.5</option>
<option value="10300-10629">11.8</option>
</select>
</form>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery("form[action*='/promotedByTable/'] #projectId").live("change", function() {
var projSelect = jQuery(this);
var fixVersion = projSelect.closest("div.gadget").find("#fixVersion");
var firstVisible;
fixVersion.find("option").each(function() {
var option = jQuery(this);
var show = option.attr("value").split("-")[0] == projSelect.val().split("-")[1];
option.toggle(show);
if(show && !firstVisible) {
firstVisible = option;
}
});
var none = fixVersion.find("option#no-versions");
if(firstVisible) {
none.remove();
fixVersion.val(firstVisible.attr("value"));
}
else if(none.length) {
none.show();
fixVersion.append(none).val(none.text());
}
else {
none = jQuery("<option id='no-versions'>(Select a project with versions)</option>");
fixVersion.append(none).val(none.text());
}
});
});
</script>
</body>
</html>
答案 0 :(得分：1)
我最近发现我的懊恼是，在大多数现代浏览器中，option标签不支持display：none style属性。我建议你查看一下，看看它是否不能引导你走向另一个方向。
答案 1 :(得分：0)
有两个问题。
live() doesn't work与jQuery 1.3.2和Internet Explorer。display: none不适用于选项元素。我最终得到了这个，除非我使用.change()代替.live('change')
jQuery(function() {
jQuery("form[action*='/promotedByTable/'] #projectId").live("change", function() {
var projSelect = jQuery(this);
var pid = projSelect.val().split("-")[1];
var gadget = projSelect.closest("div.gadget");
var fixVersion = gadget.find("#fixVersion");
var hiddenVersions = gadget.find("#hiddenVersions");
if(!hiddenVersions.length) {
hiddenVersions = jQuery("<select id='hiddenVersions' style='display:none;' />").insertAfter(fixVersion);
}
// hiding options doesn't seem to work except in firefox
// instead let's move them to a hidden select
fixVersion.find("option").each(function() {
hiddenVersions.append(this);
});
var firstVisible;
hiddenVersions.find("option").each(function() {
var option = jQuery(this);
if(pid == option.attr("value").split("-")[0]) {
fixVersion.append(option);
if(!firstVisible) {
firstVisible = option;
}
}
});
var none = fixVersion.find("option#no-versions");
if(firstVisible) {
none.remove();
}
else if(none.length) {
fixVersion.append(none).val(none.text());
}
else {
none = jQuery("<option id='no-versions'>(Select a project with versions)</option>");
fixVersion.append(none).val(none.text());
}
});
});