当我单击到文本框时，如何打开菜单，然后在javascript中单击选择转移到文本框的值，如何制作？

Question

我想制作一个脚本，在其中单击输入字段后，将出现一个下拉列表，并且当我单击选项之一时，将在输入中填充来自选择下拉列表的值。

单击输入字段时，我已经能够打开选择下拉列表，但是我已经将选择的值转移到了输入后记中。 我究竟做错了什么？

此处的HTML代码：

<form>
    <table style="width:100%">
      <tr>
        <th>Width:<div id="text1"><input type="text" ></div></th>
        <th>heigth:<div id="text2"><input type="text" ></div></th> 
        <th>        
            <select id="vSelect" onclick="myFunction()" multiple style="height:100px;">
                <option value="sval1" >1</option>
                <option value="sval2">2</option>
                <option value="sval3">3</option>
                <option value="sval4">4</option>
                <option value="sval5">5</option>
            </select>
            <select id="vSelect1" onclick="myFunction1()" multiple style="height:100px;">
                <option value="sval6" >6</option>
                <option value="sval7">7</option>
                <option value="sval8">8</option>
                <option value="sval9">9</option>
                <option value="sval10">10</option>
            </select>
        </th>
      </tr>
    </table>
</form>

此处的javascript：

$(document).ready(function(){   
$('#text1').click(function(){
    $('#vSelect1').hide();  
    $('#vSelect').show();
});


$('#text2').click(function(){
    $('#vSelect').hide(); 
    $('#vSelect1').show();
});

}）;

function myFunction() {//bazei timi sto pedio text
    var sel = document.getElementById('vSelect');
    document.getElementById('text1').value = sel.options[sel.selectedIndex].text;
}

function myFunction1() {//bazei timi sto pedio text
    var sel = document.getElementById('vSelect1');
    document.getElementById('text2').value = sel.options[sel.selectedIndex].text;
}

CSS在这里：

#vSelect{display:none;}
#vSelect1{display:none;}

Answer 1

将您的事件更改为onchange

<select id="vSelect1" onchange="myFunction1()" multiple style="height:100px;">
    <option value="sval6" >6</option>
    <option value="sval7">7</option>
    <option value="sval8">8</option>
    <option value="sval9">9</option>
    <option value="sval10">10</option>
</select>

如果您使用jQuery，它可能会像这样简单

<select id="vSelect1" onchange="$('#text2').val($(this).val());$(this).hide();" multiple style="height:100px;">
    <option value="sval6" >6</option>
    <option value="sval7">7</option>
    <option value="sval8">8</option>
    <option value="sval9">9</option>
    <option value="sval10">10</option>
</select>

Answer 2

该解决方案效果很好，所有jQuery

将id更改为输入字段而不是div：

<form>
    <table style="width:100%">
      <tr>
        <th>Width:<div><input id="text1" type="text" ></div></th>
        <th>heigth:<div><input id="text2" type="text" ></div></th> 
        <th>        
            <select id="vSelect" onclick="myFunction()" multiple style="height:100px;">
                <option value="sval1" >1</option>
                <option value="sval2">2</option>
                <option value="sval3">3</option>
                <option value="sval4">4</option>
                <option value="sval5">5</option>
            </select>
            <select id="vSelect1" onclick="myFunction1()" multiple style="height:100px;">
                <option value="sval6" >6</option>
                <option value="sval7">7</option>
                <option value="sval8">8</option>
                <option value="sval9">9</option>
                <option value="sval10">10</option>
            </select>
        </th>
      </tr>
    </table>
</form>

不需要功能的Javascript：

$(document).ready(function(){   
    $('#text1').focus(function(){
        $('#vSelect1').hide();  
        $('#vSelect').show();
    });


    $('#text2').click(function(){
        $('#vSelect').hide(); 
        $('#vSelect1').show();
    });

    $('#vSelect').change(function() {
        var val = $(this).val();
        $('#text1').val(val);
        $(this).hide();
    });

    $('#vSelect1').change(function() {
        var val = $(this).val();
        $('#text2').val(val);
        $(this).hide();
    });
});