ユーザーが単語を書き留める入力フィールドを変更したいと考えています。次に、単語はを使用してjavascriptに取り込まれますdocument.getElementById("myInput1").value;
つまり、基本的に、htmlでは次のようになります。
<input type="text" id="myInput1" placeholder="" style="z-index:1"></input>
<span onclick="newElement1()" class="addBtn" style="border-radius: 0px; height:30px">Add</span>
しかし、私が欲しいのは選択フィールドであることを知っているので、ユーザーは間違ったものやリストに存在しないものを入力することができません：
<select>
<option value="0">Select car:</option>
<option value="1">Audi</option>
<option value="2">BMW</option>
<option value="3">Citroen</option>
<option value="4">Ford</option>
<option value="5">Honda</option>
<option value="6">Jaguar</option>
<option value="7">Land Rover</option>
<option value="8">Mercedes</option>
<option value="9">Mini</option>
<option value="10">Nissan</option>
<option value="11">Toyota</option>
<option value="12">Volvo</option>
</select>
したがって、多くのことを変更せずに、HTML内の入力テキストを選択フィールドに置き換えたいと思います。次に、ユーザーが選択するものは、IDが「myInput1」になります（もちろん、javascriptはこれをどう処理するかを知っています）。
あなただけのために依頼する必要があるvalueのselect代わりにinputフィールド。
方法の設定によってborder-radius:0、すべてでそれを設定しないことと同じであり、あなたが設定することはできませんheightにspan（あなたが変更しない限りspanにdisplay:blockまたはdisplay:inline-blockので）span要素は、インライン要素であり、彼らのheightその内容によって決定されます。
// If an element has an id, then .getElementById() is the most direct way
// to access it.
let make = document.getElementById("carMake");
// If an element doesn't have an id, .querySelector() is very easy to use
// to get a reference to the element. Here, the selector is for the .addBtn class
document.querySelector(".addBtn").addEventListener("click", function(){
// Get the text of the selected <option>
console.log("You selected: ", carMake.options[carMake.selectedIndex].textContent);
// Get the value of the selected <option>
console.log("You selection has a value of: ", carMake.value);
});<span class="addBtn">Add</span>
<select id="carMake">
<option value="0">Select car:</option>
<option value="1">Audi</option>
<option value="2">BMW</option>
<option value="3">Citroen</option>
<option value="4">Ford</option>
<option value="5">Honda</option>
<option value="6">Jaguar</option>
<option value="7">Land Rover</option>
<option value="8">Mercedes</option>
<option value="9">Mini</option>
<option value="10">Nissan</option>
<option value="11">Toyota</option>
<option value="12">Volvo</option>
</select>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加