使用Javascript從下拉列表中獲取未定義的值/文本

Question

當我從下拉列表中選擇項目時，我不知道為什么會得到未定義或空數據。

<form action="">
  <select class="form-control regist-user-input" id="user.attributes.countryId" name="user.attributes.countryId" required>
                        <option value="">Country</option>
                            <option value="1" >
                            AFGHANISTAN
                            </option>
                            <option value="2" >
                            ALAND ISLAND
                            </option>
                            <option value="3" >
                            ALBANIA
                            </option>
                            <option value="4" >
                            ALGERIA
                            </option>
                            <option value="5" >
                            AMERICAN SAMOA
                            </option>
                            <option value="6" >
                            ANDORRA
                            </option>
                            <option value="7" >
                            ANGOLA
                            </option>
                            <option value="8" >
                            ANGUILLA
                            </option>
                            <option value="9" >
                            ANTARCTICA
                            </option>
                            <option value="10" >
                            ANTIGUA AND BARBUDA
                            </option>
                    </select>
  <br><br>
  <input type="submit" onClick="myNewFunction()">
</form>

<script>
var e = document.getElementById('user.attributes.countryId');
var inpCountry = e.options[e.selectedIndex].text;

function myNewFunction() {
    alert(inpCountry.text);
}
</script>

當我嘗試警告它時，inpCountry.value和inpCountry.text都將獲取未定義的數據。 這里似乎有什么錯誤？

Answer 1

嘗試將元素放入函數中。 這是因為這兩行

var e = document.getElementById('user.attributes.countryId'); var inpCountry = e.options[e.selectedIndex].text;

其次，由於input類型為Submit，因此它是提交表單的默認行為

選擇提交按鈕后將不會更新

 function myNewFunction(e) { e.preventDefault() var e = document.getElementById('user.attributes.countryId'); var inpCountry = e.options[e.selectedIndex]; console.log(inpCountry.innerHTML.trim()); } 

 <form action=""> <select class="form-control regist-user-input" id="user.attributes.countryId" name="user.attributes.countryId" required> <option value="">Country</option> <option value="1"> AFGHANISTAN </option> <option value="2"> ALAND ISLAND </option> <option value="3"> ALBANIA </option> <option value="4"> ALGERIA </option> <option value="5"> AMERICAN SAMOA </option> <option value="6"> ANDORRA </option> <option value="7"> ANGOLA </option> <option value="8"> ANGUILLA </option> <option value="9"> ANTARCTICA </option> <option value="10"> ANTIGUA AND BARBUDA </option> </select> <br><br> <input type="submit" onClick="myNewFunction(event)"> </form> 

Answer 2

var inpCountry = e.options[e.selectedIndex].text;

function myNewFunction() {
    alert(inpCountry.text);
}

應該

function myNewFunction() {
    var inpCountry = e.options[e.selectedIndex].text; //so that selectedIndex is checked again whenever this function runs
    alert(inpCountry.text);
}

Answer 3

將.text刪除到inpCountry。

 <form action=""> <select class="form-control regist-user-input" id="user.attributes.countryId" name="user.attributes.countryId" required> <option value="">Country</option> <option value="1" > AFGHANISTAN </option> <option value="2" > ALAND ISLAND </option> <option value="3" > ALBANIA </option> <option value="4" > ALGERIA </option> <option value="5" > AMERICAN SAMOA </option> <option value="6" > ANDORRA </option> <option value="7" > ANGOLA </option> <option value="8" > ANGUILLA </option> <option value="9" > ANTARCTICA </option> <option value="10" > ANTIGUA AND BARBUDA </option> </select> <br><br> <input type="submit" onClick="myNewFunction()"> </form> <script> var e = document.getElementById('user.attributes.countryId'); var inpCountry = e.options[e.selectedIndex].text; function myNewFunction() { alert(inpCountry); } </script> 

Answer 4

希望對您有幫助

函數myNewFunction（）{

var e = document.getElementById('user.attributes.countryId');
var inpCountry = e.options[e.selectedIndex].text; 
alert(inpCountry);
}