Question

我如何从 Select HTML 中获取价值？

2021-08-29

64

javascript typeerror

我尝试从下拉列表中获取一个值。列表中的值被分配了语言类型。下载过程中显示错误：

Uncaught TypeError: Cannot read property 'value' of undefined

在此行代码中： lang: langForm.elements.lang.value

<main>
    <form id="langForm">
    <section class="language">
    <label id="atr3" >Language: </label>
        <select id="langs" class="pure-u-1 pure-control-group"></select>
    </section>
    </form>

    <div id="info"></div>
    <div class="quote">
        <center><h1 id="atr1">Welcome to the Employee Reporting System website!</h1></center>
        <h2 id="atr2">Fill employee name </h2>
    </div>
    <form id="form" class="pure-form" style="width:50%; margin-left: 70px; margin-top: 180px">
        <input type="text" name="name" class="pure-input-rounded" placeholder="name" />
    <button id="btn" class="pure button pure-button-primary">Search</button>
    </form>
    <div id="returnMsg"></div>
</div>

<script>
        const API_URL = 'http://localhost:8080/api';

        const CODE_TO_EMOJI = {
       'pl':'PL',
       'en':'EN',
       'de':'DE',
       'it':'IT',
       'fr':'FR',}

        fetch ('http://localhost:8080/api/langs')
            .then(response => response.json())
            .then(langArr => {
                const checkboxes = langArr.map (lang => `
                <option name="lang" value="${lang.id}" >${CODE_TO_EMOJI[lang.code]}</option>
                `);
                document.getElementById('langs').innerHTML = checkboxes;
            });

        const form = document.getElementById('form');
        const langForm = document.getElementById('langForm');
        document.getElementById('btn').addEventListener('click', (event) => {
        event.preventDefault();
        const formObj = {
        name: form.elements.name.value,
        lang: langForm.elements.lang.value
        };
        fetch (`${API_URL}?${new URLSearchParams(formObj)}`)
            .then(response => response.text())
            .then((text) => {
                div.innerHTML = `
                <h1>${text}</h1>
                `;
            });
        });
</script>
</body>

我尝试了非常不同的配置来获取值，但仍然不起作用。虽然上述从中检索“name”值没有问题

Answer 1

简单来说：

const
  CODE_TO_EMOJI = {'pl':'PL','en':'EN','de':'DE','it':'IT','fr':'FR'}
, langForm      = document.forms['lang-form']
  ;
Object
.entries(CODE_TO_EMOJI)
.forEach( ([k,v]) =>
  langForm.langs.add( new Option(v,k)))
  ;
langForm.langs.onchange = () =>
  {
  console.log( langForm.langs.value )
  setTimeout( console.clear, 1000)
  }

.as-console-row { background-color: yellow; }

<form name="lang-form">
  <label>Language: </label>
  <select name="langs" ></select>
</form>

Answer 2

如果您要获取下拉列表中所有选项的值，则需要像这样循环遍历所有选项：

var select = document.getElementById('langs');
for(let i = 0 ; i < select.options.length;i++){
    console.log(select.options[i].value);
}

但如果您只想获取所选项目的值，则可以轻松使用这个：

var select = document.getElementById('langs');
var name = select.options[select.selectedIndex].value;