5

上記のタイトルで皆さんを混同したかどうかはわかりません。私の問題は次のとおりです。

コードに標準の javascript (jQuery なし) と HTML を使用しています。要件は、<select>...</select>メニューの場合、さまざまな長さの動的リストがあることです。

文字の長さoption[selectedIndex].text > 43を変更したい 場合はoption[selectecIndex]、新しいテキストに変更します。

私はこれを行うことができます

this.options[this.selectedIndex].text = "changed text";

正常に動作する onChange イベントで。ここでの問題は、ユーザーが選択を変更することを決定すると、ドロップダウンリストには変更されたテキストを含む以前に選択されたテキストが表示されることです。これは元のリストを表示する必要があります。

私は困惑しています！これを行う簡単な方法はありますか？

どんな助けでも素晴らしいでしょう。

ありがとう

4

2 に答える 2

3

以前のテキスト値をデータ属性に保存し、必要に応じてテキストをリセットするために使用できます。

document.getElementById('test').onchange = function() {

    var option = this.options[this.selectedIndex];

    option.setAttribute('data-text', option.text);
    option.text = "changed text";

    // Reset texts for all other options but current
    for (var i = this.options.length; i--; ) {
        if (i == this.selectedIndex) continue;
        var text = this.options[i].getAttribute('data-text');
        if (text) this.options[i].text = text;
    }
};

http://jsfiddle.net/kb7CW/

于 2013-02-26T21:25:50.487 に答える
2

あなたはjqueryでそれをかなり簡単に行うことができます。これが実用的なフィドルです：http：//jsfiddle.net/kb7CW/1/

そのためのスクリプトも次のとおりです。

      //check if the changed text option exists, if so, hide it
$("select").on('click', function(){
   if($('option#changed').length > 0)
   {
        $("#changed").hide()
   }
});
//bind on change
$("select").on('change', function(){
    var val = $(":selected").val(); //get the value of the selected item
    var text = $(':selected').html(); //get the text inside the option tag
    $(":selected").removeAttr('selected'); //remove the selected item from the selectedIndex
    if($("#changed").length <1) //if the changed option doesn't exist, create a new option with the text you want it to have (perhaps substring 43 would be right
          $(this).append('<option id="changed" value =' + val + ' selected="selected">Changed Text</option>');
    else
        $('#changed').val(val) //if it already exists, change its value

   $(this).prop('selectedIndex', $("#changed").prop('index')); //set the changed text option to selected;

});
于 2013-02-26T22:58:40.740 に答える