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

时间:2018-10-05 13:19:50

标签: javascript html

我具有此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"/>

可以使用javascript来确定每个<option></option>的长度,具体取决于所选择的选项,或者使用不同的变量来获取每个选项的名称或ID。然后在输入中调用该函数。

1 个答案:

答案 0 :(得分:1)

如果要使用所选下拉选项的长度,则可以尝试以下操作:

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