當我單擊到文本框時，如何打開菜單，然后在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();
    });
});