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？

这是我的 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

尝试这个。

<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 回答
0

如果您不反对使用jquery，您可以使用 jquery UI 内置的自动完成功能 ，它几乎可以满足您的需求。对于更高级和更好的插件，您可以尝试选择

于 2012-09-12T12:48:58.503 回答