ドロップダウンオプションのデフォルトテキストを設定する

ドロップダウンメニューのデフォルトテキストを無効にして、ユーザーに選択させることはできません。ドロップダウンオプションのデフォルトテキストを設定する

<select kendo-drop-down-list style="width: 28rem;"> 
    <option selected="selected" disabled="disabled" >State</option> 
    <option>Azerbaijan</option> 
    <option>Belarus</option> 
</select>

問題は、私が選択され、無効なIT DOENを設定すると、ドロップダウンメニューの状態オプションを示していません。誰かが私を助けることができます。事前にお礼します

出典

2016-04-15 chan

で更新は

問題ここにインスタンス化時にリスト内のアイテムのコレクションからいずれかのdisabled要素を削除するKendo DropDownListコンポーネントの使用によって引き起こされています。

剣道はこの動作をサポートしていないので、明示的にコンポーネントをインスタンス化した後、そのオプションを無効にすることを含む、以下のハックを使用してそれを自分で実装することができます。

<select id='state' kendo-drop-down-list style="width: 28rem;"> 
    <option>State</option> 
    <option>Azerbaijan</option> 
    <option>Belarus</option> 
</select> 
<script> 
$(function(){ 
    // Instantiate the drop down 
    $('#state').kendoDropDownList(); 
    // Explicitly disable the first element 
    $("#state_listbox .k-item")[0].disabled = true; 
}); 
</script>

あなたは、以下の本の作業スニペットを見ることができます：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link href="https://da7xgjtj801h2.cloudfront.net/2015.2.624/styles/kendo.common.min.css" rel="stylesheet" type="text/css" /> 
 
<link href="https://da7xgjtj801h2.cloudfront.net/2015.2.624/styles/kendo.silver.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
<script src="https://da7xgjtj801h2.cloudfront.net/2015.2.624/js/kendo.ui.core.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>Kendo Snippet Example</title> 
 
</head> 
 
<body> 
 
    <select id='state' kendo-drop-down-list style="width: 28rem;"> 
 
    <option>State</option> 
 
    <option>Azerbaijan</option> 
 
    <option>Belarus</option> 
 
    </select> 
 
    <script> 
 
    $(function(){ 
 
     $('#state').kendoDropDownList(); 
 
     // Explicitly disable the first element 
 
     $("#state_listbox .k-item")[0].disabled = true; 
 
    }); 
 
    </script> 
 
</body> 
 
</html>

オリジナルレスポンス（剣道に関するものではありません）

placeholder属性を「状態」に設定しようとしましたか？「状態」のデフォルトの表示テキストを設定します

<select kendo-drop-down-list style="width: 28rem;" placeholder='State'> 
    <option selected disabled="disabled" >State</option> 
    <option>Azerbaijan</option> 
    <option>Belarus</option> 
</select>

、しかしそれは、明示的に後で選択することはできませなります

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<select kendo-drop-down-list style="width: 28rem;" placeholder='State'> 
 
    <option selected disabled="disabled" >State</option> 
 
    <option>Azerbaijan</option> 
 
    <option>Belarus</option> 
 
</select> 
 
</body> 
 
</html>

をさらに、問題がある場合要素に剣道関連のスタイルが適用されているため、剣道ドロップダウンをインスタンス化するときにoptionLabel属性を使用して、このデフォルトの「プレースホルダ」を明示的に設定できます。

$('[kendo-drop-down-list').kendoDropDownList(){ 
     /* Other configuration here */ 
     optionLabel: 'State' 
}

出典

2016-04-15 17:56:11

私は試しましたが動作しません – chan

スニペットはうまくいかないのですか？それがロードされると "状態"が表示され、選択を変更しようとするとそのオプションは無効になります。さらに、実際に剣道ドロップダウンを使用している場合は、そのような動作をサポートしているかどうかを確認するドキュメントを検討することを検討することもできます。 –

何が起こっているのかわかりませんが、ドロップダウンに状態が表示されません – chan

私はあなたが何を意味するのか少し混乱しています。コードをテストすると、 "State"オプションが表示されました。これは、あなたが望むように聞こえるものです。

あなたは状態がオプションとしてドロップダウンに表示したくない場合は、この試してみてください。ここに

<select kendo-drop-down-list style="width: 28rem;"> 
    <option selected="selected" disabled="disabled" style="display: none;">State</option> 
    <option>Azerbaijan</option> 
    <option>Belarus</option> 
</select>

がfiddle

出典

2016-04-15 17:52:20 Jwags

私はデフォルトのテキストとして状態を表示したいが、誰もそれを選択できないように無効にする必要があります。私の出力は、アゼルバイジャンからのドロップダウンを示しています。ドロップダウンでの状態は言及していません – chan

ドロップダウンオプションのデフォルトテキストを設定する

答えて

関連する問題