htmlとjavascriptのテキスト入力でドロップダウンメニューを接続するには

私はSublimeを使用していますが、html、css、javascriptの入力テキストをドロップダウンメニューに接続したいとします。したがって、ユーザーがドロップダウンメニューをクリックすると、結果をテキスト入力で視覚化する必要があります。テキスト入力で「イタリア」をユーザーがクリックすると、「イタリア」htmlと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のコードです：

誰かが私を助けることができますか？

出典

2016-10-02 Michele della Mea

あなたはCLASSLIST方法で余分なドットを添加してもよいです。これをやってみてください 'var box = document.getElementById（ 'display'）; function myFunction（）{ box.value + document.getElementById（ "myDropdown"）。classList（）; } ' – xFighter

@ abdulあなたは私に例を教えてもらえますか？ –

これらの回答は、あなたの問題の解決に役立ちましたか？ – ksav

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); 
}); 
}

出典

2016-10-02 15:10:59

彼はjQueryを使用していません... – Robiseb

は、選択した 'a'タグの内容が親div –

の.val（）とみなされないため、' a'タグ 'option'タグを変更したいので機能しませんこのすべてのオプションを 'select'タグに追加します。彼はこのソリューションのためにjQueryを使うべきです –

はよく、この回避策

<!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>

出典

2016-10-02 15:19:49

することができ、クリックリスナーを追加します。 <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>

出典

2016-10-02 15:28:36 Robiseb

htmlとjavascriptのテキスト入力でドロップダウンメニューを接続するには

答えて

関連する問題