爲什麼jQuery可選擇功能不正常？

我有一個MVC項目，我已經實現了兩個可選擇的jQuery插件象下面這樣：的<HTML>代碼，爲什麼jQuery可選擇功能不正常？

<div class="product-page-options"> 
           <div class="pull-left"> 
            <label class="control-label" style="font-weight:bolder">Size:</label> 
            <ol class="ui-selectable" style="width:auto" id="selectable"> 
             @{ 
              var size = Model.AvailableSizes.Split(','); 
              foreach (var item in size) 
              { 
               <li class="ui-selectable">@item</li> 
              } 
             } 
            </ol> 
           </div> 
           <div class="pull-left"> 
            <label class="control-label">Color:</label> 
            <ol class="ui-selectable" style="width:auto" id="selectable1"> 

             @{ 
              var color = Model.AvailableColors.Split(','); 
              foreach (var clr in color) 
              { 
               <li class="ui-selectable">@clr</li> 
              } 
             } 
            </ol> 
           </div> 
          </div>

用於可選的jQuery插件靜態腳本。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#selectable").selectable({ 
      selected: function (event, ui) { 
       $(ui.selected).siblings().removeClass("ui-selected"); 
       $("#selectedsize").val($("li.ui-selected").html()); 
      } 
     }); 
    }); 
</script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#selectable1").selectable({ 
      selected: function (event, ci) { 
       $(ci.selected).siblings().removeClass("ui-selected"); 
       $("#selectedsize").val($("li.ui-selected").html()); 
      } 
     }); 
    }); 
</script>

第一個可選的jQuery插件完美工作，而第二個插件無法正常工作。我的意思是我無法從第二個selectable列表中選擇任何項目，並且外觀與第一個不一樣。下面的圖片清楚地顯示了這個問題。

我能做些什麼嗎？任何幫助，將不勝感激。提前致謝。

來源

2016-08-21 Dawar

爲什麼兩個'script'和'ready'功能？你可以這樣寫：'$（「＃selectable，＃selectable1」）。selectable（{...}）' – Riad

您正在顏色選擇器中設置$（「＃selectedsize」）。這可能是你的錯誤。 –

@Riad我試着建議的方式，但沒有更好的結果都是一樣的。 – Dawar

有2個問題在這裏玩。首先，你需要爲這兩個選擇項設置專門的樣式（如果你已經在jQuery UI站點上的例子中創建了代碼）;其次，在選擇器中選擇項目時，你需要確定路徑。到

$("#selectedcolor").val($("#selectable1>li.ui-selected").html());

選定li元素作爲相關可選的子下面plunker會告訴你它的工作：

Link To My Plunker

來源

2016-08-21 19:46:35

謝謝你會試試這個！ – Dawar

爲什麼jQuery可選擇功能不正常？

回答

相關問題