jquery選擇/選項框 - 鏈接關係

這種情況下可能使用JavaScript或jQuery？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>

來源

2011-11-10 Mustapha George

這裏有一點要注意，如果你打算在同一範圍內使用$（本）多次，以便它指的是同一個對象，最好將$（this）賦值給一個局部變量。 var me = $（this）;然後用'我'代替。 – kasdega

您的第一個問題是禁用選擇選項在所有瀏覽器和版本中無法可靠運行。你最好的選擇是去掉你不想要的選項，但是你也可以創建一些東西，強制用戶在需要時選擇另一個選項。

對於每個選擇框對的不同規則，您也會遇到問題。除非在'控制'選擇框中選擇選項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'的選項。您可以輕鬆添加另一個「數據」屬性，該屬性將允許您傳遞應該保留和/或應該刪除的選項列表。你可以通過選項索引來做到這一點，但是這樣會稍微靈活一些，難以理解。

來源

2011-11-10 18:56:01 kasdega

鏈接的選擇器是否總是在相鄰的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。

來源

2011-11-10 18:44:06

我喜歡你給你的回答添加了一個免責聲明，指出如果HTML改變了這個可能會有問題。 – kasdega

我不能給你的答案添加評論，所以我會寫在這裏 - 這是一個好方法，但我認爲他可能有多個選擇列表與相同的類（我相信他意味着完全相同的片段將重複，這就是他爲什麼不能使用ID的原因？）雖然他自己必須澄清一下。如果是這種情況，數據方法將不起作用。 –

我很肯定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()重新啓用值

來源

2011-11-10 19:23:28 Kato

禁用選項在FF中工作（至少在8.0中） – kasdega

對，我的意思是它在IE <8中不起作用;當然，它只適用於所有情況;） – Kato

jquery選擇/選項框 - 鏈接關係

回答

相關問題