0

JavaScript を使用してフィルター可能なドロップダウン リストを作成しました。これがリスト ボックスのコーディングです。

<select name="d1" class="leftselect" id="d1" size="5"  ondblclick="DropDownTextToBox('d1','t1');" style="display:none;" >
                <option>axcsus-COMMON STOCK</option>
                <option>aces</option>
            <option>bdfs</option>
            <option>befs</option>
                <option>behs</option>
            <option>dfgh</option>
                <option>dhes</option>
                <option>dwww</option>
            <option>pass</option>
                <option>pass</option>

</select>

4 つのテキスト フィールドと矢印の文字を作成しました。矢印の文字をクリックすると、コントロールの下部にリストが表示されます。

<div id="div_name" style="float:left;z-index: 20;">
   <input name="t1"  type="text"  id="t1" onkeyup="value_filtering('d1','t1');" onkeypress="onEnter(event,'d1','t1')" />
   <input type="button" class="rightselect" onclick="displayList('d1','t1');"  value="&#9660;" />        
</div>

<div class="inputbox">
   <input name="t2" class="inputbox" type="text"  id="t2"  onkeyup="value_filtering('d2','t2');" onkeypress="onEnter(event,'d2','t2')" />
   <input type="button" class="leftselect" onclick="displayList('d1','t2');"  value="&#9660;" />
</div>

<div style="float:left;text-align:center;" >
    <input name="t3" type="text"  id="t3" onkeyup="value_filtering('d3','t3');" onkeypress="onEnter(event,'d3','t3')" />
    <input type="button" class="rightselect" onclick="displayList('d1','t3');"  value="&#9660;" />
</div>

<div class="inputbox">
    <input name="t4" class="inputbox" type="text"  id="t4"  onkeyup="value_filtering('d4','t4');" onkeypress="onEnter(event,'d4','t4')" />
    <input type="button" class="leftselect" onclick="displayList('d1','t4');" value="&#9660;" />
</div>

表示リスト関数では、対応するテキスト ボックスの位置を取得し、テキスト ボックスの下にリスト コントロールを表示しました。おきえ。今私の問題は、テキストボックスでオプションを選択した場合、リストボックスが表示されているテキストボックスに選択した値を表示する必要があることです。リストボックスから値を選択した後、リストを表示しているテキストボックスを見つけるにはどうすればよいですか? テキストボックスIDを動的に見つけるにはどうすればよいですか?

これは、対応する TextBox に Listbox を表示するための私の JS コードです。

function displayList(ele,txt)
    {
        vis=document.getElementById(ele);
        obj=document.getElementById(txt);
        if (vis.style.display==="none")
                vis.style.display="block";
        else
            vis.style.display="none";

                vis.style.position = "absolute";

            //alert(getElementPosition(txt).top + ' ' + getElementPosition(txt).left);

    vis.style.top = getElementPosition(txt).top+obj.offsetHeight;
    vis.style.left = getElementPosition(txt).left;
    }

注：矢印ボタンのクリックイベントでこの関数を呼び出すことができます。テキスト フィールド ID を簡単に渡すことができます。しかし、ListBox アクションの場合、テキスト フィールドの特定の ID を送信できません。

4

2 に答える 2

0

jqueryを使用することに反対がない場合は、jquery UIに組み込まれているオートコンプリート を使用できます。これにより、探していることをほぼ実行できます。より高度で優れたプラグインについては、選択してみてください

于 2012-09-12T12:48:58.503 に答える
0

これを試して。

<script>
var targetInput=null;
function displayList(ele,txt) {
    vis=document.getElementById(ele);
    obj=document.getElementById(txt);
    targetInput = obj;
    if (vis.style.display==="none") {
        vis.style.display = "block";
    } else {
        vis.style.display = "none";
        vis.style.position = "absolute";
        //alert(getElementPosition(txt).top + ' ' + getElementPosition(txt).left);
        vis.style.top = getElementPosition(txt).top+obj.offsetHeight;
        vis.style.left = getElementPosition(txt).left;
    }
}
function selectList(txt) {
    if (!targetInput) return;
    targetInput.value = txt.value;
    txt.style.display = 'none';
}
</script>

<div id="div_name" style="float:left;z-index: 20;">
   <input name="t1"  type="text"  id="t1" onkeyup="value_filtering('d1','t1');" onkeypress="onEnter(event,'d1','t1')" />
   <input type="button" class="rightselect" onclick="displayList('d1','t1');"  value="&#9660;" />        
</div>

<div class="inputbox">
   <input name="t2" class="inputbox" type="text"  id="t2"  onkeyup="value_filtering('d2','t2');" onkeypress="onEnter(event,'d2','t2')" />
   <input type="button" class="leftselect" onclick="displayList('d1','t2');"  value="&#9660;" />
</div>

<div style="float:left;text-align:center;" >
    <input name="t3" type="text"  id="t3" onkeyup="value_filtering('d3','t3');" onkeypress="onEnter(event,'d3','t3')" />
    <input type="button" class="rightselect" onclick="displayList('d1','t3');"  value="&#9660;" />
</div>

<div class="inputbox">
    <input name="t4" class="inputbox" type="text"  id="t4"  onkeyup="value_filtering('d4','t4');" onkeypress="onEnter(event,'d4','t4')" />
    <input type="button" class="leftselect" onclick="displayList('d1','t4');" value="&#9660;" />
</div>

<select name="d1" class="leftselect" id="d1" size="5" ondblclick="DropDownTextToBox('d1','t1');" onclick="selectList(this)" style="display:none;">
                <option>axcsus-COMMON STOCK</option>
                <option>aces</option>
            <option>bdfs</option>
            <option>befs</option>
                <option>behs</option>
            <option>dfgh</option>
                <option>dhes</option>
                <option>dwww</option>
            <option>pass</option>
                <option>pass</option>

</select>
于 2012-09-12T15:17:47.653 に答える