javascript - 如何使用 JavaScript 获取 HTML 下拉列表中每个选项的长度

Question

我有这个 JavaScript 函数来验证 HTML 选择下拉列表中电话号码的长度。

<script type="text/javascript">
  function test(){

    var max_length_internet_number = 10;
    var max_length_mobilephone_number = 11;
    var total_length = 15;

    var length_telephone_prefix = document.getElementById('prefix').options.length;

    var telephone_textbox = document.getElementById('phone');
    var message = "";


    //MIGHT BE... - THIS IS ONLY A TEST

    if(length_telephone_prefix + telephone_textbox.value.length == total_length && telephone_textbox.value.length > max_length_mobilephone_number){

     message.setCustomValidity("ERROR, The length of a number of a mobile phone don't be greater than 15 digits");
     return false;
    }else{

    message.setCustomValidity('');
    return true;
    }


}
</script>

我认为这句话是:document.getElementById('prefix').options.length当然会占用我拥有的下拉列表选项的长度，但真的吗？我认为这一行将采用所有而不是每个选项，具体取决于所选的选项。

这是下拉列表和文本框。

<select id="prefix">
  <option name="mobile" value="+234">+234</option>
  <option name="internet" value="+4388">+4388</option>
  <option name="others" value="">Other number</option>
</select>

<input type="text" id="phone" name="phone" maxlength="15"/>

可以取每个 <option></option> 的长度根据选择的选项，使用 JavaScript，可能会在不同的变量中获取每个选项的名字或 ID。然后调用输入中的函数。

Answer 1

如果您想获取所选下拉选项的长度，则可以尝试以下操作:

var list = document.getElementById('prefix');
var selected_option_length = list.options[list.selectedIndex].value.length;
console.log(selected_option_length);