2

長いオプションを省略記号として表示したい HTML 選択に問題があります。選択したオプション テキストの長さをチェックする javascript onChange を介してこれを実現できます。N よりも大きい場合は、省略記号付きのテキストに変更します。ここでの問題は、オプションが選択されて省略記号が表示され、再度選択ボックスをクリックすると、元のテキストが省略記号として表示されることです。オプションの元のリストを常に表示し、オプションが選択されている場合にのみ省略記号を実行する必要があります。

私のonChangeコードは次のようになります

if(option[selectedIndex].text.length > N){
    var val = option[selectedIndex].text;
    option[selectedIndex].text = option[selectedIndex].text.substr(0,N) + "...";
}

これを達成するために私が考えた方法の 1 つは、選択がクリックされるたびに元のリストを更新することでした。残念ながら、私のブラウザは HTML 選択の「クリック」イベントをサポートしていません。私が使っても

event.preventDefault();

DOM はクリック イベントを認識しますが、リストが表示された後にのみ発生するため、目的に反します。私がここでやっていることのような もの

この場合、jQueryを使用できないという大きな制限もあります!

お知らせ下さい！

4

3 に答える 3

2

目的を達成するには、最初に select 要素にネストされた「ダミー」オプション要素を作成し、CSS で非表示にする必要があります。ユーザーが値を変更すると、ユーザーが選択したオプションの値でダミーの表示値が上書きされます。

その後、ユーザーが新しいオプションを選択すると、「ダミー」値は非表示になりますが、メインの選択ボックスには引き続き入力されます。以前の jsfiddle に基づく大まかなコードを次に示します。

警告: このソリューションの互換性はわかりません。

HTML: 

<select id="select-el">
    <option id="display-el" value="-1">Can't see me</option>
    <option id="id1" value="1">Option 1</option>
    <option id="id2" value="2">Option 2</option>
    <option id="id3" value="3">Option 3</option>
    <option id="id4" value="4">Option 4</option>
    <option id="id5" value="5">Option Longer</option>
</select>

CSS:

#display-el {
  display:none;
  visibility: hidden;
}

JavaScript: 

var N = 8;

var selectEl = document.getElementById('select-el');
var displayEl = document.getElementById('display-el');

selectEl.onchange= function(e) {
    var index = selectEl.selectedIndex;
    var option = selectEl[index];

    selectEl.selectedIndex = 0;

    if(option.text.length > N){
        displayEl.text = option.text.substr(0, N) + "...";
    } else {
        displayEl.text = option.text
    }

    displayEl.value = option.value;
    console.log(displayEl.value);
}

ここで jsFiddle をフォークしました: http://jsfiddle.net/3v8yt/ので、チェックしてください。

于 2013-02-27T22:54:57.887 に答える
0

2つの選択肢が考えられます。

オプション 1: 「実際のテキスト」を含む非表示の要素を使用します。たとえば、次のようにします。

<input type="option1" value="Real text1" />
<input type="option2" value="Real text2" />

次に、onchange が検出されたら、選択リストを再作成し (同じように、1 つの要素の代わりにすべての要素に実際のテキストを適用します)、選択したコード (「...」) を適用します。

オプション 2: テキストを '...' に変更する前に、状態を保存します。必要な JavaScript 変数は 2 つだけだと思います。

var actualOption = 0;
var realText = '';

「...」を適用する前に、onchange が検出されたときに実際の状態をそれらの変数に設定します。たとえば、次のようになります。 (変更される予定の) 新しいオプションを含む actualOption 3 - '...' を適用します。

新しい onchange が検出されると、以前に選択されたオプションのテキストを復元し、新しいオプションを設定する必要があります。

ご理解いただければ幸いです...

編集:私は長い間、純粋に JS を使用していませんが、試してみます。

コードのある時点で、2 つのグローバル変数を宣言します。

var actualOption = 0;
var realText = '';

onchange 関数に次のようなものを適用します。

(...)
if (actualOption!=0) option[actualOption].text = realText;
(...)

あなたの if(option[selectedIndex.....) に、次のようなものを適用します:

var val = option[selectedIndex].text;
realText = val;
actualOption = selectedIndex;
option[selectedIndex].text = option[selectedIndex].text.substr(0,N) + "...";

再開時: 選択したオプションの状態を変更前に保存します。新しい onchange が検出されると、以前に選択されたオプションを復元し、新しく選択されたオプションの状態を保存します。

うまくいくはずだと思います。

于 2013-02-27T22:32:31.613 に答える
0

CSSだけで実際に必要なものを実現できます.Javascriptを使用してオプションテキストを置き換える必要はまったくありません. 選択とオプションの両方に同じ css を使用することもできます。

CSS:

select, select option {
  overflow: hidden;
  text-overflow: ellipsis;
}

次に、選択および/またはオプションに幅 (または最大幅) の値を設定すると、テキストが切り取られる直前に、最後に省略記号が含まれていることがわかります。

この jsfiddle の例をチェックして、これがいかに簡単に実装できるかを確認してください。

于 2013-09-17T04:40:51.683 に答える