如何將下拉菜單與使用html和javascript的文本輸入連接

Question

我正在使用Sublime，並且我想使用HTML，CSS和javascript將下拉菜單與輸入文本連接起來。 因此，用戶單擊下拉菜單必須在輸入的文本中可視化結果。 在這種情況下，如果用戶在文本輸入中單擊“意大利語”，則必須看到“意大利語”

我已經編寫了代碼，但是沒有用：

<!DOCTYPE html>
<html>
<head>

    <style>
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>
</head>
<title>Calculators</title>
<body bgcolor="yellow">
    <h1 style="color:red;">Calculators:</h1><br>

    <p style="margin-left: 50px;">
    <a href="C:\Users\ALBINO\Desktop\prove\calculator\index.html" target="_self">Example Calculator</a><br>
    <a href="index2.html" target="_self">Italian Calculators</a><br>
    <a href="http://web2.0calc.com/">Online Scientific Calculator</a>
    </p>
    <!--<script src="logic.js"></script> http://www.qatarstationery.com/image/cache/data/Calculator%20MJ100%20-%20Casio-900x900.jpeg-->

    <div id="examplePicture" style="margin-left: 500px;">
        <img src="http://i.ebayimg.com/00/$T2eC16NHJIkE9qU3jckhBRY0k-ob)!~~_35.JPG" />
    </div>

<div class="dropdown">
  <button onclick="myFunction() class="dropbtn" >Choose your favourite calculator</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#">italian</a>
    <a href="#">german</a>
    <a href="#">brazilian</a>
    <a href="#">french</a>
    <a href="#">spaniard</a>
  </div>
</div>

<input type="text" id="display" disabled><br>

<script src="homeJava.js"></script>

</body>
</html>

這是我的JavaScript代碼：

var box = document.getElementById('display');

function myFunction() {
    box.value += document.getElementById("myDropdown").classList.();
}

有人能幫我嗎？

Answer 1

在html代碼更改時添加此功能

<div class="dropdown">
<button class="dropbtn" >Choose your favourite calculator</button>
<div id="myDropdown" onchange="myFunction()" class="dropdown-content">
  <a href="#">italian</a>
  <a href="#">german</a>
  <a href="#">brazilian</a>
  <a href="#">french</a>
  <a href="#">spaniard</a>
 </div>
</div>

並在您的js文件中：

function myFunction{

 $("#myDropdown option:selected").each(function () {
        getSelectedItem = $(this).val();
        $("#display").val(getSelectedItem);
 });
}

Answer 2

好吧，這可以解決

<!DOCTYPE html>
<html>
<head>

    <style>
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>
</head>
<title>Calculators</title>
<body bgcolor="yellow">
    <h1 style="color:red;">Calculators:</h1><br>

    <p style="margin-left: 50px;">
    <a href="C:\Users\ALBINO\Desktop\prove\calculator\index.html" target="_self">Example Calculator</a><br>
    <a href="index2.html" target="_self">Italian Calculators</a><br>
    <a href="http://web2.0calc.com/">Online Scientific Calculator</a>
    </p>
    <!--<script src="logic.js"></script> http://www.qatarstationery.com/image/cache/data/Calculator%20MJ100%20-%20Casio-900x900.jpeg-->

    <div id="examplePicture" style="margin-left: 500px;">
        <img src="http://i.ebayimg.com/00/$T2eC16NHJIkE9qU3jckhBRY0k-ob)!~~_35.JPG" />
    </div>

<div class="dropdown">
  <button class="dropbtn" >Choose your favourite calculator</button>
  <div id="myDropdown" class="dropdown-content">
    <a onclick="myFunction('italian')">italian</a>
    <a onclick="myFunction('german')">german</a>
    <a onclick="myFunction('brazilian')">brazilian</a>
    <a onclick="myFunction('french')">french</a>
    <a onclick="myFunction('spaniard')">spaniard</a>
  </div>
</div>

<input type="text" id="display" disabled><br>

<script>
    var box = document.getElementById('display');

    function myFunction(text) {
        box.value = text;
    }
</script>

</body>
</html>

Answer 3

在您的<a>元素（ #myDropdown的子元素）上添加點擊監聽器

 var a = document.getElementById('myDropdown').querySelectorAll('a'); for (var i = 0; i < a.length; i++) { // Set listener a[i].addEventListener('click', function(){ // On click, set the input value with the <a> content document.getElementById('display').value = this.innerHTML; }); }

 <div id="myDropdown" onchange="myFunction()" class="dropdown-content"> <a href="#">italian</a> <a href="#">german</a> <a href="#">brazilian</a> <a href="#">french</a> <a href="#">spaniard</a> </div> <input type="text" id="display" disabled><br>

如何將下拉菜單與使用html和javascript的文本輸入連接

問題描述

3 個解決方案

解決方案1
0 2016-10-02 15:10:59

解決方案2
0 2016-10-02 15:19:49

解決方案3
0 2016-10-02 15:28:36

如何將下拉菜單與使用html和javascript的文本輸入連接

問題描述

3 個解決方案

解決方案1 0 2016-10-02 15:10:59

解決方案2 0 2016-10-02 15:19:49

解決方案3 0 2016-10-02 15:28:36

解決方案1
0 2016-10-02 15:10:59

解決方案2
0 2016-10-02 15:19:49

解決方案3
0 2016-10-02 15:28:36