1

内に書かれたテキストの一部を非表示にするにはどうすればよいoptionですか?

私は次のことを試しました：

<select name='what'>
   <option value='some value'>Value to be shown <span class='hide'>value to be hidden</span></option>
   ....
</select>

そしてCSSはこちら。

.hide{ visibility : hidden; }

しかし、うまくいかないようです。私もdisplay:none代わりに試しましvisibility:hiddenたが、それもうまくいきません。

PS: なぜこれをやりたいのですか? 非表示のテキストを検索に含めたいので、これを行いたいと思います。

更新html5 メタ タグを使用して実現できることは十分承知していますが、残念ながら、呼び出された Jquery プラグインを使用しているため、ここでは使用できず、Chosenメタ タグでの検索はサポートされていません。

4

3 に答える 3

4

オプションに追加データを追加するには、たとえば検索のために、オプション要素の値または追加属性を使用できます。例えば、

<option value="value to be hidden" data-meta="value to be hidden">Value to be shown</option>

HTML

<select>
    <option value="value to be hidden1" data-meta="value to be hidden11">Value to be shown1</option>
    <option value="value to be hidden2" data-meta="value to be hidden22">Value to be shown2</option>
    <option value="value to be hidden3" data-meta="value to be hidden33">Value to be shown3</option>
</select>
<div class='output'></div>

JS

$(document).ready(function(){
    $('select').change(function(){
       $('.output').html($('select option:selected').val()+'<br/>'+ 
        $('select option:selected').data('meta')); 
    });
});

http://jsfiddle.net/uHY5P/

プレフィックス「data-」を使用して必要な数の属性を導入し、呼び出してそれらを取得できますjQuery.data('yourCustomAttr')

于 2013-10-19T11:21:00.473 に答える
0

これはできません。<option>tag に他のタグを含めることはできません。Select2を使用

于 2013-10-19T11:20:48.453 に答える