剣道のドロップダウンリストからjqueryを使用して特定のドロップダウンオプションを削除します

Question

私はこれを理解しようとしているインターネットを試して検索しましたが、まだ正確な答えは見つかりませんでした。標準的に発行されたselectドロップダウンから項目を削除するのは簡単です。コードは次のようになります：$（ "＃dropdownlistID option [value = 'optiontoremove']"）。

剣道ドロップダウンリストでは、$（ "＃dropdownlistID"）のデータに沿ってどうやってこれを行うのですか？data（ "kendoDropDownList"）.whateverhere.remove。

特定のインデックス位置のアイテムを削除する方法を指摘していますが、インデックス値として特定の値を持つオプションを削除する方法の問題には答えられないという回答は既にあります。必要なものの例は、剣道のドロップダウンリストからこれらの要素があると言うことです。「クルーザー」と言ってオプションを削除（または隠す）するにはどうすればよいですか？

select 
    option value="volvo" Volvo 
    option value="saab" Saab 
    option value="mercedes" Mercedes 
    option value="audi" Audi 
    option value="cruiser" Cruiser 
    option value="blah" blah 
    option value="blah2" blah2 
select 

Answer 1

剣道UIデータバインドされたウィジェットはadd、insertまたはremoveアイテムに自分のdataSource instances「APIを使用しています。

アイテムのインデックスをハードコードしたくない場合は、getをIDでハードコードします。これが機能するためには、IDフィールドは、上記の例では、すべての変更がクライアントでのみ発生することを意味し、CRUD operationsのために剣道UIデータソースを設定し、しないことschema.model.id

http://dojo.telerik.com/aFUGe

ノートに定義する必要がありますリモートサービスに永続化されません。

DropDownListデータ項目にIDがない場合、その値で項目を見つける唯一の方法は、dataメソッドを持つすべての項目を取得し、正しい項目が見つかるまで繰り返します。

Answer 2

次のコードスニペットを試してください。

<input id="color" style="width: 100%;" /> 
<input type="button" onclick="removeItem()" value="removeItem" /> 
........... 
........... 
<script> 
    $(document).ready(function() { 
     var data = [ 
        { text: "Volvo", value: "volvo" }, 
        { text: "Audi", value: "audi" }, 
        { text: "Cruiser", value: "cruiser" } 
     ]; 

     // create DropDownList from input HTML element 
     $("#color").kendoDropDownList({ 
      dataTextField: "text", 
      dataValueField: "value", 
      dataSource: data, 
     }); 


    }); 
    function removeItem() { 
     var ddl = $("#color").data("kendoDropDownList"); 
     var oldData = ddl.dataSource.data(); 
     var dataLength = oldData.length; 
     for (var i = 0; i < dataLength; i++) { 
      var item = oldData[i]; 
      if (item.value == "cruiser"){ // Here 'value' is 'dataValueField' field 
       ddl.dataSource.remove(item); 
       break; 
      } 
     } 
    } 
</script> 

ご懸念があれば教えてください。

Answer 3

jQueryを使用して、ドロップダウンリストから特定の項目を削除する必要はありません。

剣道データソースオブジェクトとそのMVVMパターンを使用することで、あなたは望みどおりのものを実現できます。

次のようにあなたのHTMLは次のようになります。私はここで働い本の例を書かれている

// Use a viewModel, so that any changes to the model are instantly applied to the view. 
// In this case the view is the dropdownlist. 
var viewModel = kendo.observable({ 
    selectedProduct: null, 

    products: new kendo.data.DataSource({ 
    transport: { 
     read: { 
     url: "//demos.telerik.com/kendo-ui/service/products", 
     dataType: "jsonp" 
     } 
    } 
    }) 
}); 

kendo.bind($("#dropdownlist"), viewModel); 

$("#removeSpecificButton").kendoButton({ 
    click: function(e) { 
    // Find the item specified in the text box 
    viewModel.products.filter({ 
         field: "ProductName", 
         operator: "eq", 
         value: $('#specificItem').val() }); 
    // Apply the view to find it 
    var view = viewModel.products.view(); 
    //remove the item from the datasource  
    viewModel.products.remove(view[0]); 
    // disable the filter 
    viewModel.products.filter({}); 
    } 
}); 

// Set-up the button so that when it is clicked 
// it determines what the currently selected dropdown item is 
// and then deletes it. 
$("#button").kendoButton({ 
    click: function(e) { 
    // Determine which item was clicked 
    var dropdownlist = $("#dropdownlist").data("kendoDropDownList"); 
    var dataItem = dropdownlist.dataItem(); 

    // Remove that item from the datasource 
    viewModel.products.remove(dataItem); 
    } 
}); 

：

http://dojo.telerik.com/@BenSmith/aCEXI/11

<input id='dropdownlist' data-role="dropdownlist" 
     data-text-field="ProductName" 
     data-value-field="ProductID" 
     data-bind="value: selectedProduct, 
        source: products" /> 

<button id="button" type="button">Remove current item</button> 

<br /> 

<input class='k-textbox' id='specificItem' /> 
<button id="removeSpecificButton" type="button">Remove specific item</button> 

をそして、あなたのJavaScriptがなりますexacを指定するためにDataSourceの "filter"メソッドがどのように使用されたかに注意してください（この場合はProductName）を削除する必要があります。アイテムが削除された後は、不要なアイテムがなくてもフィルタを削除してデータを表示することができます。

私はまた、現在選択されているアイテムを完全性のために削除できる機能を追加しました。