Question

情况是我有一个下拉框，如下所示

<td>Select Country:</td>
<td><select id="bcountry" name="bcountry"></select>
<script language="javascript">print_country("bcountry")</script></td>

我的JavaScript文件中有一系列国家/地区

var country_arr = new Array("Afghanistan", "Albania",....,"n);

现在从html调用此函数的下面的代码我真的不知道下面的函数是如何工作的

 function print_country(country_id)
{
// given the id of the <select> tag as function argument, it inserts <option> tags
var option_str = document.getElementById(country_id);
option_str.length=0;
option_str.options[0] = new Option('Select Country','');
option_str.selectedIndex = 0;
    for (var i=0; i<country_arr.length; i++)
        {
    option_str.options[option_str.length] = new Option(country_arr[i],country_arr[i]);
    }
 }

任何一个plz向我解释上面这个函数print_country

感谢名单

Answer 1

为了讨论，我添加了一些行号：

 function print_country(country_id)
 {
      // given the id of the <select> tag as function argument, it inserts <option> tags
  1.    var option_str = document.getElementById(country_id);
  2.    option_str.length=0;
  3.    option_str.options[0] = new Option('Select Country','');
  4.    option_str.selectedIndex = 0;
  5.    for (var i=0; i<country_arr.length; i++)
  6.    {
  7.         option_str.options[option_str.length] = new Option(country_arr[i],country_arr[i]);
  8.    }
 }

第1行：文档对象模型（DOM）元素被加载到变量option_str中第3行：创建一个新的Option("label","value")对象，并将其分配给索引为零（0）的option_str的{{1}}数组。
第4行：所选索引设置为零（0），这是options数组中的第一个元素第5行：您正在从零（0）循环到options的长度并且每次递增country_arr。
第7行：创建一个新的i对象，并在最后一个位置分配给Option("label","value")的{{1}}数组。对于标签和值，option_str对象包含options中的Option元素。

希望能够解决它！

Answer 2

Your code：

创建一个空的<select>下拉列表
然后，脚本会根据country_id
该脚本将带有标签“Select Country”（一个占位符）的选项作为第一个选项，并将空字符串作为值。
然后为<option>数组中的每个项目添加country_arr。它们中的每一个都使用相同的值作为其标签及其值。

Answer 3

我在你的代码中添加评论。

function print_country(country_id) // this is function declaration, have one parameter : country_id
{
    // given the id of the <select> tag as function argument, it inserts <option> tags
    var option_str = document.getElementById(country_id); // Get the element in your html with the id equals to country_id, the element should be a dropdown list
    option_str.length=0 // clear the dropdown list item
    option_str.options[0] = new Option('Select Country',''); // add first item in dropdown list
    option_str.selectedIndex = 0; // set selected item to dropdown list
    for (var i=0; i<country_arr.length; i++) // loop for the array
    {
        option_str.options[option_str.length] = new Option(country_arr[i],country_arr[i]); // create new item in your dropdown list
    }
 }

更多： Javascript Select

Answer 4

创建option_str，将其指向country_id
为其添加标题（“选择国家/地区”）
然后遍历country_arr数组，并将每个国家/地区添加到option_str控件（即country_id）。

Answer 5

以下是函数print_country的分解说明。

function print_country(country_id)
{

它表示print_country的功能块的开始。

var option_str = document.getElementById(country_id);

此语句仅提供由country_id表示的DOM元素。

option_str.length=0;

option_str的长度设置为0.

option_str.options[0] = new Option('Select Country','');

option_str中的第一项被赋予HTML option元素，其显示值为Select Country，实际值为空字符串。

option_str.selectedIndex = 0;

它将默认值设置为第一个选项值，即“选择国家/地区”。

    for (var i=0; i<country_arr.length; i++)

这是数组for上的country_arr循环。

        {
    option_str.options[option_str.length] = new Option(country_arr[i],country_arr[i]);

现在，在第一个循环中，option_str的长度为1，因为它有一个元素Select Country。因此，在option_str的循环数组中为option分配了HTML country_arr元素。

    }
 }

希望它澄清。

Answer 6

传递的

country_id是您选择框的ID。此函数在此语句中检索对象：

var option_str = document.getElementById(country_id);

最初将长度初始化为0，并且此处的默认值也设置为：

option_str.length=0;
option_str.options[0] = new Option('Select Country','');

通过包含默认选项，长度增加1。然后设置国家/地区的循环选项，直到它到达country_arr的长度的末尾。

Answer 7

在不知道调用此函数的位置的情况下，函数正在执行以下操作：

 function print_country(country_id)
//function name with the argument "country_id". 
//Wherever this function is being called it is calling it as 
//"print_country('bcountry');
//the "bcountry" in the function call is found in the id of the <select /> tag in the HTML
{
// given the id of the <select> tag as function argument, it inserts <option> tags
var option_str = document.getElementById(country_id);
//"option_str" is now the name of the <select /> object
option_str.length=0;
//setting the option_str length to 0 eliminates the <option /> tags that are normally
//a part of the <select />, essentially clearing the drawing board to avoid duplications
option_str.options[0] = new Option('Select Country','');
//this command creates the first select <option/> giving the user the instruction to Select a country
option_str.selectedIndex = 0;
//now the selected <option />, the one that will appear in the <select> window is the instruction that was just created
    for (var i=0; i<country_arr.length; i++)
        {
    option_str.options[option_str.length] = new Option(country_arr[i],country_arr[i]);
    }
//the "for" loop, above, cycles through the array and for each member of the Array it creates a new <option> for the <select> tag
 }

Answer 8

将selectbox html对象分配给变量option_str。

var option_str = document.getElementById(country_id);

将选项数设置为0.（如果html中有任何我想的话）

option_str.length=0;

将第一个选项的值设置为“选择国家/地区”

option_str.options[0] = new Option('Select Country','');

将默认选择的选项设置为第一个选项。

option_str.selectedIndex = 0;

遍历country_arr数组。

for (var i=0; i<country_arr.length; i++)

以下代码将对country_arry中的每个项目执行一次。

在javascript中，您可以使用以下语法将任何项添加到任何索引的数组中：

myArray[index] = item

确保插入发生在数组的末尾。

option_str.options[option_str.length]

由于javascript中的数组是基于0的，并且length属性从1开始，因此使用option_str.length作为索引可确保它将插入到数组的末尾。

插入新选项，其中选项文本是country_arr中的当前项目并且选项值也是country_arry

中的当前项

new Option(country_arr[i],country_arr[i])

Javascript代码功能说明

8 个答案: