コンボ値を動的に取得する方法

-7

私はcomboboxを動的に作成しようとしています。今私はoptionタグを使用していて、横にselectタグを配置しています。コンボ値を動的に取得する方法

<div> 
       <select data-placeholder="Choose a Country..." class="chosen-select" tabindex="4"> 
       <option value=""></option> 
       <option value="United States">United States</option> 
       <option value="United Kingdom">United Kingdom</option> 
       <option value="Afghanistan">Afghanistan</option> 
       <option value="Aland Islands">Aland Islands</option> 
       <option value="Albania">Albania</option> 
       </select> 
      </div>

どのように動的にすることができますか。私はJSONからそれを取ることができます。どのようにしてスクリプト内の関数を書くか。 1. URLからデータを取得してコンボ値に配置する方法。私はプレーンなJavaScriptにしたいです。

これは私のJSONデータ

[ 
    { 
     ID : 0, 
     VALUE : "United State" 
    },{ 
     ID : 1, 
     VALUE : "United Kingdom" 
    },{ 
     ID : 2, 
     VALUE : "Afghanistan" 
    },{ 
     ID : 3, 
     VALUE : "Aland Islands" 
    },{ 
     ID : 4, 
     VALUE : "Albania" 
    } 
]

更新コードです：あなたのJSONデータおよびあなたがjsonc配列を反復処理し、このような新しいオプションを追加することができ、属性id="choose"で

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes</title> 
    <link rel="stylesheet" href="docsupport/style.css"> 
    <link rel="stylesheet" href="docsupport/prism.css"> 
    <link rel="stylesheet" href="chosen.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://ajax.googleapis.com; style-src 'self'; img-src 'self' data:"> 
</head> 
<body> 
    <form> 
    <div id="container"> 
     <div id="content"> 
     <div class="side-by-side clearfix"> 
     <div class="side-by-side clearfix"> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
      <div> 
       <select id="choose" data-placeholder="Choose a Country..." class="chosen-select" tabindex="4"> 
       <option value=""></option> 

       </select> 
      </div> 
     </div> 
     </div> 
     </div> 
    </div> 
    </form> 
</body> 
<script> 
var jsonc = [ 
    { 
     ID : 0, 
     VALUE : "United State" 
    },{ 
     ID : 1, 
     VALUE : "United Kingdom" 
    },{ 
     ID : 2, 
     VALUE : "Afghanistan" 
    },{ 
     ID : 3, 
     VALUE : "Aland Islands" 
    },{ 
     ID : 4, 
     VALUE : "Albania" 
    } 
]; 

var new_opt=""; 
for(i=0;i<jsonc.length;i++) 
{ 


    new_opt+='<option value="'+jsonc[i]['VALUE']+'">'+jsonc[i]['VALUE']+'</option>'; 
} 

document.getElementById('choose').innerHTML =new_opt; 
</script> 
</html>

出典

2017-05-02 shanky singh

にid属性を追加した在宅ワークの問題のように思えます。 –

あなたはajaxについて読んだことがありますか？ http://api.jquery.com/jquery.ajax/ –

私は何か助けを得ることを感謝します。 –

1）私は、選択ボックスid="choose"

var jsonc = [ 
 
    { 
 
     ID : 0, 
 
     VALUE : "United State" 
 
    },{ 
 
     ID : 1, 
 
     VALUE : "United Kingdom" 
 
    },{ 
 
     ID : 2, 
 
     VALUE : "Afghanistan" 
 
    },{ 
 
     ID : 3, 
 
     VALUE : "Aland Islands" 
 
    },{ 
 
     ID : 4, 
 
     VALUE : "Albania" 
 
    } 
 
]; 
 

 
var new_opt=""; 
 
for(i=0;i<jsonc.length;i++) 
 
{ 
 

 

 
    new_opt+='<option value="'+jsonc[i]['VALUE']+'">'+jsonc[i]['VALUE']+'</option>'; 
 
} 
 

 
document.getElementById('choose').innerHTML =new_opt;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
       <select id="choose" data-placeholder="Choose a Country..." class="chosen-select" tabindex="4"> 
 
       <option value=""></option> 
 
       
 
       </select> 
 
      </div>

出典

2017-05-02 09:50:37 JYoThI

スクリプトタグ内に関数を書く必要があります –

スクリプトタグ内にコードを入れてください – JYoThI

jqueryを2回削除してこの行を削除しますscript-src 'self' https://ajax.googleapis.com; style-src 'self'; img-autiv = "content-security-policy" content = "default-src" self; src 'self' data： "> @shankysingh – JYoThI

：

var jsonc = [{ID: 0,VALUE: "United State"}, {ID: 1,VALUE: "United Kingdom"}, {ID: 2,VALUE: "Afghanistan"}, {ID: 3,VALUE: "Aland Islands"}, {ID: 4,VALUE: "Albania"}], 
 
    selectBox = document.getElementById('choose'); 
 

 
jsonc.forEach(function (elem) { 
 
    selectBox.options.add(new Option(elem.VALUE, elem.ID)); 
 
});

<select id="choose"> 
 
    <option value="">Choose a Country...</option> 
 
</select>

出典

2017-05-02 09:46:25

回答ありがとうございます。スクリプトタグの下に 'some function'を書く必要があります。その関数を呼び出す必要があります。 –

あなたのコードでソリューションを使用して、 'some function'を構築することができます。 –

コンボ値を動的に取得する方法

答えて

関連する問題