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行目：新しいオブジェクトが作成され、インデックスゼロ（0）での配列にOption("label","value")割り当てられます。4行目：選択したインデックスは、配列の最初の要素であるゼロ（0）に設定されています。 5行目：ゼロ（0）からの長さまでループし、毎回インクリメントしています。 7行目：新しいオブジェクトが作成され、最後の位置にあるの配列に割り当てられます。オブジェクトには、ラベルと値の両方のth要素が含まれています。option_stroptions
options
country_arri
Option("label","value")option_stroptionsOptionicountry_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

あなたのコード:

空の<select>ドロップダウンを作成します
次に、スクリプトは、指定された ID に基づいてドロップダウンへの参照を作成します。country_id
スクリプトは、値として空の文字列を持つ最初のオプションとして、プレースホルダーである "Select Country" というラベルを持つオプションを配置します。
次に、配列<option>内の各項目に for を追加します。country_arrそれらのそれぞれは、そのラベルとその値に同じ値を使用します。

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_str0 に設定されます。

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

の最初のアイテムには、表示値と実際の値が空の文字列を持つoption_strHTMLoption要素が与えられます。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]);

ここで、最初のループでは、要素が 1 つあるため、の長さoption_strは 1Select Countryです。そのため、のループ配列にoption_strHTML 要素が割り当てられます。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

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 のすべてのアイテムに対して 1 回実行されます。

JavaScript では、次の構文を使用して、任意の項目を配列の任意のインデックスに追加できます。

myArray[index] = item

挿入が配列の最後で行われるようにします。

option_str.options[option_str.length]

JavaScript の配列は 0 ベースであり、長さプロパティは 1 から始まるため、インデックスとして option_str.length を使用すると、配列の最後に挿入されます。

オプションテキストが country_arr の現在のアイテムであり、オプション値も country_arry の現在のアイテムである新しいオプションを挿入します。

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

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) に追加します。

javascript - Javascript コード 機能 説明

8 に答える 8

Related

Reference

javascript - Javascript コード機能説明