javascript - 使用Javascript从下拉列表中获取未定义的值/文本

当我从下拉列表中选择项目时，我不知道为什么会得到未定义或空数据。

<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都将获取未定义的数据。这里似乎有什么错误？

最佳答案

尝试将元素放入函数中。这是因为这两行

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>