Блог

Главная - Вопросы по программированию - Javascript сравнение выпадающих списков

Javascript сравнение выпадающих списков

#javascript #compare

#javascript #Сравнить

Вопрос:

Я новичок в Javascript, и у меня возникают проблемы при сравнении элементов из HTML. Это то, что у меня есть для функции, я не могу получить оператор if для сравнения со словом Other, которое является одним из элементов моего списка, есть идеи?

 function createList(form) {
    var row;    
    var table;  
    var form;   
        
    table = document.getElementById("shoppingList");    
    row = table.insertRow(table.rows.length);           
    form = form;
    if (form.elements["storeItems"].value === "Other"){
    row.insertCell(0).innerHTML = form.elements["otherItems"].value;}
    else{
        row.insertCell(0).innerHTML = form.elements["storeItems"].value;
    }
    
    row.insertCell(1).innerHTML = form.elements["funStores"].value;         
    row.insertCell(2).innerHTML = form.elements["selectColor"].value;               
    row.insertCell(3).innerHTML = form.elements["notes"].value;
    
}

Моя цель состоит в том, чтобы, если выбран параметр списка Other, он извлекает данные из текстового поля Other вместо слова Other.введите описание изображения здесь

 <!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta Tags -->
    <meta charset="utf-8">
    <meta name="description" content="Benoit's living space">
    <meta name="keywords" content="home, funiture, living, space, Benoit">
    <meta name="author" content="Jesse Benoit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Jesse Benoit Homework Chapter 9</title>
<link rel="stylesheet" href="../css/Homework11.css"> <!-- Import of CSS -->

</head>
<body>
    <h2 class="center">Furniture Shopping List</h2> <!-- Header 2 Centered -->
    <div class="row">
       <p class="center"> <!-- p cenetered with instructions -->
         Time to go shopping! Pick an Item or Items from the list. Pick a Store from the list. Pick a color from the list. Added any extra notes you would like.
       </p> 
        <div class="left">
            <p>
            <!-- Form to gather inputs from the user -->
                <form>
                <label>List of Items</label>
                <select id="storeItems" size="4"></select> <br>
                <label>Other: </label>
                <input type="text" id="otherItems"> <br>
                
                <label>Stores</label>
                <select id="funStores" size="4"></select> <br>
                <label>Other: </label>
                <input type="text" id="otherStores"> <br>
                
                <label>Chose a Color</label> <br>
                <input type="radio" name="selectColor" value="White">White<br>
                <input type="radio" name="selectColor" value="Black">Black<br>
                <input type="radio" name="selectColor" value="Blue">Blue<br>
                <input type="radio" name="selectColor" value="Red">Red<br>
                <input type="radio" name="selectColor" value="OtherColor">Other<br>
                <div id="selectColor"></div>
                
                <label>Notes: </label><br>
                <textarea rows="5" cols="20" id="notes"></textarea><br>
                
                <input type="button" id="submit" value="Create Shopping List" onClick="createList(this.form);"> <!-- Button to create an invitation -->
                <br><br> 
                </form>
            </p>
        </div>
        <div class="right">
            <table id="shoppingList">
            <tr>
            <th>Item amp;nbsp;</th><th>Store amp;nbsp;</th><th>Color of Item amp;nbsp;</th><th>Notes amp;nbsp;</th>
            </tr>
            </table> 
        </div>
    </div>
    <br>
    <script src="../js/homework11.js"></script> 
</body>
</html>

selectItem();
selectStore();



function selectItem() {
    var myItems = "Couch; Table; Dresser; Chair; Bed; Other" ;
    var itemArray = myItems.split(";");
    var name = 0; 
    var myOption = "";  
    for (var i = 0; i < itemArray.length; i  ) { 
        name = itemArray[i];
        myOption = document.createElement("option");
        myOption.name = name;
        myOption.value = name;
        myOption.text = name;
        document.getElementById("storeItems").appendChild(myOption);
    }
}  

function selectStore(){
    var myStore = "Walmart; Target; Wayfair; Other" ; 
    var storeArray = myStore.split(";");
    var name = 0;
    var myOption = "";
    
    for (var i = 0; i < storeArray.length; i  ) { 
        name = storeArray[i];
        myOption = document.createElement("option");
        myOption.name = name;
        myOption.value = name;
        myOption.text = name;
        document.getElementById("funStores").appendChild(myOption);
    }
}

function createList(form) {
    var row;    
    var table;  
    var form;   
        
    table = document.getElementById("shoppingList");    
    row = table.insertRow(table.rows.length);           
    form = form;
    if (form.elements["storeItems"].value === "Other"){
    row.insertCell(0).innerHTML = form.elements["otherItems"].value;}
    else{
        row.insertCell(0).innerHTML = form.elements["storeItems"].value;
    }
    
    row.insertCell(1).innerHTML = form.elements["funStores"].value;         
    row.insertCell(2).innerHTML = form.elements["selectColor"].value;               
    row.insertCell(3).innerHTML = form.elements["notes"].value;
    
}

Комментарии:

1. пожалуйста, покажите html и css, которые идут с этим

2. форма не назначена.

Ответ №1:

Если у вас есть выпадающий список, вы можете получить выбранное значение через:

 let dropdownEl = document.getElementById('storeItems');
console.log(dropdownEl.value);

Я немного смущен тем, что form есть, но я предполагаю, что ваш выпадающий список имеет id="storeItems" .

Кроме того, я предполагаю, что вы создали выпадающий список, используя <select>...</select> тег.

Ответ №2:

Оказывается, наличие выпадающего списка в качестве функции было проблемой, и мне нужно было перечислить свои параметры в HTML