Question

这种情况可以使用javascript或jquery吗？

当具有“cl_preAction”类的选择框的值设置为“003”“世界末日”选项时，应删除选择框“cl_prePRRS”01,02,03中的选项或将其灰显（不可能选择 - 如果可能的话）

请注意，此模式将在页面上重复多次，因此使用相同的ID将无效。

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



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

Answer 1

链接的选择器是否总是在相邻的tr元素中？这不是一种优雅的方式，因为它在很大程度上取决于你的结构（如果在包含两个选择器的那些之间添加一个tr元素，这将失败）

$('.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();
    }
});

这将从DOM中删除选项。

Answer 2

您的第一个问题是，禁用选择选项无法在所有浏览器和版本中可靠地运行。您最好的选择是删除您不想要的选项，但您也可以创建一些强制用户在需要时选择其他选项的内容。

对于每个选择框配对，您也会遇到不同规则的问题。除非在“控制”选择框中选择选项3，否则它总是会消除目标选择框的选项1,2,3。

我会使用'数据'属性......

    <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') {
            $("."+me.attr("data-target-select")).filter(function() {
                return ($(this).val() != '03');  // I think you really want 04 here.
            }).remove();
        }
   });

除非你真的需要，否则不要试图跳过DOM。这是令人费解的，天堂禁止你需要移动选择框或更改页面结构。

您会注意到此解决方案只会删除目标选择框中非='03'的选项。您可以轻松添加另一个“数据”属性，该属性允许您传入应保留和/或应删除的选项列表。你可以通过选项索引来做到这一点，但这样做会不那么灵活，也很难弄明白。

Answer 3

我非常确定disabling options will only work in IE 8和更高。但是，在旧版本中有some interesting things you can try可以解决这个问题。

那就是你所说的here's an example that answers the question;）

基本上，它执行以下操作

查找下一个tr代码
在该节点中找到select元素
如果选择disabled="disabled"则声明End of World
如果未选择End of World，请使用removeAttr()重新启用值

jquery select / option box - 链接关系

3 个答案: