0

アプリで剣道コンボボックスを使用していますが、コンボボックスの実際の関数の外で、値とレコードの ID をコンボボックスから取得する必要があります....各レコードに対してテーブルでコンボボックスドロップダウンを使用しているため、css ID をリレーできません。コンボボックスの値を取得するには...選択したレコードの入力コンボボックスに到達することができ、背景色を適用してこのテストを行いました。入力テキストボックスだけで正常に動作する .val() をテストしましたが、剣道 ComboBox では発生しません...

どうもありがとう

入力

  <td class="N_td">@Html.TextBox("Input_MarkingSchemeTitle_Element", null, new { id = @item.ElementID + "_EMST", @class = "ElementMarkingSchemeTitle k1-grid-input k-textbox_3 _MarkSchemeId_Input" })  </td>

ComboBox 関数

 $("._MarkSchemeId_Input").kendoComboBox({
        minLength: 1,
        filter: 'contains',
        dataTextField: "Name",
        dataValueField: "ID",
        dataSource: {
            type: "json",
            serverFiltering: false,
            transport: {
                read: "/Qualification/GetAllMarkScheme_JSON"
            },
        },
        change: function () {

           alert("value " + this.value() + "   " + this.text());                      
        }
    });

jQuery 関数

$("#ElementTable").on("click", ".k1-grid-confirm", function () {


   $(this).closest('table').find("._MarkSchemeId_Input").css("background", "red");

   var a1 = $(this).closest('table').find("._MarkSchemeId_Input").text(); // doesn't work

        alert("a1  " + a1);
 .....
4

3 に答える 3

2

設計上、ComboBox ウィジェットはすべてのスタイルと CSS クラスを元の要素から可視入力にコピーします。これはここに文書化されています。レンダリングされた HTML を調べると、次のようになります。

  • 元の要素 + 初期化コード
    <input class="カスタムクラス" />
    <スクリプト>
        $(関数() {
            $(".custom-class").kendoComboBox();
        });
    </script>
  • このHTMLの結果
    <span class="k-widget k-combobox k-header custom-class">
      <span tabindex="-1" unselectable="on" class="k-dropdown-wrap k-state-default">
        <input class="k-input custom-class" type="text" autocomplete="off" style="width: 100%;">
        <span tabindex="-1" unselectable="on" class="k-select">
          <span unselectable="on" class="k-icon ki-arrow-s" role="button" tabindex="-1">
            選択する
          </span>
        </span>
      </span>
      <input class="custom-class" data-role="combobox" style="display: none;">
    </span>

ご覧のとおり、custom-classはラッパー要素と可視入力にコピーされます。このため、元の入力要素のみを見つけるには、より具体的なセレクターを使用する必要があります。

$(".custom-class[data-role=combobox]");

これは入力要素のリストを返すことに注意してください。選択したデータ項目を取得する必要がある場合は、それらをループして、各入力要素のコンボボックス インスタンスを取得する必要があります。

ここでは、これを実現する方法を示す簡単な jsBin デモを用意しました。

于 2014-04-01T11:34:16.620 に答える
1

私は次のように問題を解決することができました

<td class="N_td">@Html.TextBox("Input_MarkingSchemeTitle_Element", null, new { id = @item.ElementID + "_EMST", @class = "ElementMarkingSchemeTitle k1-grid-input k-textbox_3 _MarkScheme_Input" })  </td>


 //--get all the MarkScheme from database and put in drop-down 
    $("._MarkScheme_Input").kendoComboBox({
        minLength: 1,
        filter: 'contains',
        dataTextField: "Name",
        dataValueField: "ID",
        dataSource: {
            type: "json",
            serverFiltering: false,
            transport: {
                read: "/Qualification/GetAllMarkScheme_JSON"
            },
        },
        change: function () {

           // alert("value " + this.value() + "   " + this.text());                      //if it need to test selected record data...    
      }
    });


 $("#ElementTable").on("click", ".k1-grid-confirm", function () {


        $(this).closest('table').find("._MarkScheme_Input").css("background", "red");

        //read all the input 'comboxBox' in loop...
        //var _comboBoxInput = $(this).closest('table').find("._MarkScheme_Input").filter("[data-role=combobox]");
        //_comboBoxInput.each(function (idx, input) {
        //    alert("idx " + idx + "  \n input " + input);
        //    var combobox = $(input).data("kendoComboBox");
        //    alert("ID>>>  : " + combobox.value() + ", Text: >>> " + combobox.text());
        //});

        //-------------------------
        var input = $(this).closest('table').find("._MarkScheme_Input");
        var comboboxInput = input.filter("[data-role=combobox]");
        var combobox = comboboxInput.data("kendoComboBox");
        var selectedText = combobox.text();
        var selectedValue = combobox.value();
        var dataItem = combobox.dataItem();

        alert("ID>>>  : " + selectedValue + ", Text: >>> " + selectedText);
于 2014-04-01T14:32:00.913 に答える