4

<select>デフォルトで属性multipleと最初のオプションが選択されたhtmlタグを使用して、動的ドロップダウンを作成しています：

<select multiple="multiple" size="1">  
    <option value="" selected="selected">All</option>  
    <option value="1">One</option>  
    <option value="2">Two</option>  
</select>

Oneたとえば、ユーザーがオプションをタップすると、想定される動作は、オプションの選択を解除してAllオプションを選択するOneことです。

iPad ブラウザがドロップダウンのネイティブ UI を開くと、ドロップダウン コントロールからタッチ イベントをキャッチできます (プラグインのコード スニペット):

this.$el.on('change', this.selectOption, this);

以下の方法でオプションを操作して選択を解除します。

selectOption: function(e){
    var opts = element.find('option');  
    opts.each(function(idx, opt){  
        $(opt).prop('selected', false);  
    });  
}

問題

オプションのプロパティはfalse適切に設定されていますが、iPad のドロップダウン UI で視覚的に選択されたオプションは変更されていないため、ユーザーが混乱する可能性があります。ドロップダウンの [完了] ボタンをタップ
すると、UI の変更が適用されます。次に開くと、すべてのオプションの選択が解除されていますが、これは問題ありませんが、少し遅れています ;-)。

質問

ユーザーが 1 つのオプションをタップし、もう 1 つのオプションがネイティブの iPad ドロップダウンでリアルタイムに削除されるように、オプションを選択/選択解除することは可能ですか?

4

1 に答える 1

1

IOS でをトリガーする<select>と、スタイルを設定する能力を超えて、独自の内部ブラウ​​ザー コントロールが使用されます。

multiple="true"属性を尊重し、それに応じて動作します。

問題は、「Web ページのボタンをクリックしたときにブラウザーのツールバーを青色にするにはどうすればよいか」という質問と同じです。

理由の質問からは明らかではありません

  1. あなたが設定したmutliple="true"
  2. 次に、size=1
  3. select次に、javascript を使用して単一のように動作させ、1 つの選択のみを許可します。

実際に必要なのは、multiple = "true"属性を削除してサイズを大きくすることだけだと思います（すべてのオプションを表示したい場合）

<select size="3">  
    <option value="" selected="selected">All</option>  
    <option value="1">One</option>  
    <option value="2">Two</option>  
</select>

その後、ネイティブの iOS コントロールが必要に応じて動作します。

他のすべてのソリューションについては、select を捨てる (または非表示にする) ことを検討し、カスタム JavaScript コントロールを作成して<ul><li>、バックグラウンドで値を設定します。

于 2014-03-02T16:54:36.277 に答える