blocks|key|4891615|text|链接的选择器是否总是在相邻的tr元素中？这不是一个优雅的方法，因为它在很大程度上取决于您的结构(如果您在包含两个选择器的元素之间添加一个tr元素，则此操作将失败)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4891616|$('.cl_preAction').live('change',+function+(){++
++++if+($(this).val()+=='003')+{
++++++++$(this).closest('tr').next('tr').find('.cl_prePRRS+option').filter(function()+{
++++++++++++return+(parseInt($(this).val(),+10)+<=+3);
++++++++}).remove();
++++}
});|code-block|syntax|javascript|4891617|这将从DOM中删除选项。|4891618|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Will the linked selectors always be in adjacent tr elements? This is not an elegant way to do it, in that it depends heavily on your structure (if you add in a tr element between those containing the two selectors, this will fail)

<pre><code>$('.cl_preAction').live('change', function (){ 
 if ($(this).val() =='003') {
 $(this).closest('tr').next('tr').find('.cl_prePRRS option').filter(function() {
 return (parseInt($(this).val(), 10) &lt;= 3);
 }).remove();
 }
});
</code></pre>

This will remove the options from the DOM.

blocks|key|4891677|text|您的第一个问题将是禁用选择选项并不能在所有浏览器和版本中可靠地工作。最好的办法是删除不需要的选项，但也可以创建一些内容，强制用户在需要时选择另一个选项。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4891678|对于每个选择框对，您还会遇到不同规则的问题。除非你在“控制”选择框中选择了选项3，否则它总是将目标选择框中的选项1、2、3清空。|4891679|我会使用'data‘属性...|4891680|++++<select+name='ACTC'+class='none+cl_preAction'+data-theme='a'+data-target-select="cl_prePRRS">

++++$('.cl_preAction').live('change',+function+(){++
++++++++var+me+=+$(this);
++++++++if+(me.val()+=='003')+{
++++++++++++$("."%2Bme.attr("data-target-select")).filter(function()+{
++++++++++++++++return+($(this).val()+!=+'03');++//+I+think+you+really+want+04+here.
++++++++++++}).remove();
++++++++}
+++});|code-block|syntax|javascript|4891681|除非迫不得已，否则不要走上试图跳过DOM的道路。它是错综复杂的，希望你永远不会需要移动一个选择框或改变页面结构。|4891682|您将注意到，此解决方案将只删除目标选择框中不是=+'03‘的选项。您可以很容易地添加另一个"data“属性，该属性允许您传入应该保留和/或应该删除的选项列表。您可以通过选项的索引来实现这一点，但这会有点不灵活，也更难弄清楚。|4891683|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Your first issue will be that disabling select options doesn't work reliably across all browsers and versions. Your best bet is to remove the options you don't want but you could also create something that forces the user to select another option when required. 

You're also going to have a problem with different rules for each of the select box pairings. Unless when you select option 3 in the 'control' select box it always blanks out options 1,2,3 of the target select box.

I would use a 'data' attribute...

<pre><code> &lt;select name='ACTC' class='none cl_preAction' data-theme='a' data-target-select="cl_prePRRS"&gt;

 $('.cl_preAction').live('change', function (){ 
 var me = $(this);
 if (me.val() =='003') {
 $("."+me.attr("data-target-select")).filter(function() {
 return ($(this).val() != '03'); // I think you really want 04 here.
 }).remove();
 }
 });
</code></pre>

Don't go down the road of trying to jump through the DOM unless you really have to. It's convoluted and heaven forbid you'd ever need to move a select box or change the page structure.

You'll notice that this solution will only remove the options that aren't = '03' in the target select box. You could easily add another "data" attribute that will allow you to pass in a list of options that should be kept and/or should be removed. You could do this by index of the options but that would be a little less flexible and harder to figure out.

blocks|key|5175334|text|我很确定disabling+options+will+only+work+in+IE+8和更高版本。但是，在旧版本中有some+interesting+things+you+can+try可以克服这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|5175335|这就是说，您所要求的here's+an+example+that+answers+the+question+;)|5175336|从本质上讲，它执行以下操作|5175337|5175338|查找下一个tr标记|unordered-list-item|style|CODE|5175339|在该节点中查找select元素如果选择了<代码>D12<代码>H213<代码>H114如果未选择D15，则使用D16重新启用值H217F218|5175340|5175341|entityMap|0|LINK|mutability|MUTABLE|url|http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/OptionDisabledSupport.html|1|http://www.lattimore.id.au/2005/07/01/select-option-disabled-and-the-javascript-solution/|2|http://jsfiddle.net/katowulf/SyDdL/1/^0|4|14|0|1N|Z|1|0|A|17|2|0|0|0|5|2|0|7|6|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]|$A|16|B|17|1|18]]|C|$]]|$1|D|3|E|5|6|7|19|8|@]|9|@$A|1A|B|1B|1|1C]]|C|$]]|$1|F|3|G|5|6|7|1D|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|1E|8|@]|9|@]|C|$]]|$1|I|3|J|5|K|7|1F|8|@$A|1G|B|1H|L|M]]|9|@]|C|$]]|$1|N|3|O|5|K|7|1I|8|@$A|1J|B|1K|L|M]]|9|@]|C|$]]|$1|P|3|-4|5|6|7|1L|8|@]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|1M|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]|10|$5|T|U|V|C|$W|11]]]]

I'm pretty sure that <a href="http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/OptionDisabledSupport.html" rel="nofollow">disabling options will only work in IE 8</a> and greater. However, there are <a href="http://www.lattimore.id.au/2005/07/01/select-option-disabled-and-the-javascript-solution/" rel="nofollow">some interesting things you can try</a> to overcome this in older versions.

That said, <a href="http://jsfiddle.net/katowulf/SyDdL/1/" rel="nofollow">here's an example that answers the question</a> as you asked it ;)

Essentially, it does the following

<ul>
<li>looks for the next <code>tr</code> tag </li>
<li>finds the <code>select</code> element in that node</li>
<li>declares <code>disabled="disabled"</code> if <code>End of World</code> is selected </li>
<li>if <code>End of World</code> is not selected, utilizes <code>removeAttr()</code> to re-enable the
values</li>
</ul>

Is this case possible using javascript or jquery? 

When the value of the select box with class "cl_preAction" is set to the option of '003' "End of World", the options in the select box "cl_prePRRS" 01,02,03 should be removed or grayed out (not possible to select - if this is possible)

Note that this pattern will repeat several times on a page, so using the same id will not work.

<pre><code>$('.cl_preAction').live('change', function (){ 
 if ($(this).val() =='003'){
 $(this).parent().parent()...
});



&lt;tr&gt;
 &lt;td&gt;Action&lt;/td&gt;
 &lt;td class='none'&gt;
 &lt;div data-role='fieldcontain' class='none'&gt;
 &lt;select name='ACTC' class='none cl_preAction' data-theme='a'&gt;
 &lt;option data-location='S' value='001'&gt;Fire&lt;/option&gt;
 &lt;option data-location='T' value='002'&gt;Flood&lt;/option&gt;
 &lt;option data-location='T' value='003'&gt;End Of World&lt;/option&gt;
 &lt;/select&gt;
 &lt;/div&gt;
 &lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
 &lt;td&gt;Reason&lt;/td&gt;
 &lt;td class='none'&gt;
 &lt;div data-role='fieldcontain' class='none'&gt;
 &lt;select name='PRRS' class='none cl_prePRRS' data-theme='a'&gt;
 &lt;option value='01'&gt;Rebuild&lt;/option&gt;
 &lt;option value='02'&gt;Relocate&lt;/option&gt;
 &lt;option value='03'&gt;Cash Payment&lt;/option&gt;
 &lt;option value='04'&gt;Send registered letter indicating this event is not covered&lt;/option&gt;
 &lt;/select&gt;
 &lt;/div&gt;
 &lt;/td&gt;
&lt;/tr&gt;
</code></pre>

jquery select/option box - linked relationship

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

这种情况下可以使用javascript或jquery吗？当类为"cl_preAction“的选择框的值设置为”003“”世界末日“选项时，选择框"cl_prePRRS”01，2，03中的选项应被移除或灰显(无法选择-如果这是可能的)请注意，此模式将在页面上重复多次，因此使用相同的id将不起作用。$('.cl_preAc...

问jquery选择/选项框-链接关系
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery选择/选项框-链接关系EN