javascript - Javascript代码功能说明

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]);
    }
 }

任何人请逐步向我解释上面的函数 print_country

谢谢

score 1 · Accepted Answer

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

 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的options数组。
第 4 行：所选索引设置为零 (0)，这是options数组中的第一个元素。
第 5 行：您从零 (0) 循环到长度并每次country_arr递增。第 7 行：创建一个新对象并将其分配给's数组的最后一个位置。该对象包含标签和值的第 th 个元素。i
Option("label","value")option_stroptionsOptionicountry_arr

希望清除它！

score 0 · Accepted Answer

你的代码：

创建一个空的<select>下拉列表
然后，脚本会根据 id 引用您的下拉列表，由country_id
该脚本将带有标签“选择国家/地区”的选项（占位符）作为第一个选项，并将空字符串作为值。
然后它为数组<option>中的每个项目附加一个。country_arr它们中的每一个都为其标签和值使用相同的值。

score 0 · Accepted Answer

我在您的代码中添加注释。

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选择

score 0 · Accepted Answer

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

score 0 · Accepted Answer

这是函数的分解解释print_country。

function print_country(country_id)
{

它表示功能块的开始print_country。

var option_str = document.getElementById(country_id);

该语句简单地给出了一个由表示的 DOM 元素country_id。

option_str.length=0;

的长度option_str设置为 0。

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

中的第一项option_str被赋予一个option带有显示值的 HTML 元素，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，因为它有一个 element Select Country。因此，在的循环数组上option_str分配了 HTML元素。optioncountry_arr

    }
 }

希望它澄清。

score 0 · Accepted Answer

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.

score 0 · Accepted Answer

在不知道从哪里调用此函数的情况下，该函数正在执行以下操作：

 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
 }

score 0 · Accepted Answer

将选择框 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 - Javascript代码功能说明

8 回答 8

Related

Reference