Wie erhalten Combo-Wert dynamisch

-7

Ich versuche, eine combobox dynamisch zu machen. Im Moment verwende ich option Tag und Platzierung in Seite select Tag.Wie erhalten Combo-Wert dynamisch

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

Wie kann ich es dynamisch machen. Ich kann es von JSON nehmen. Wie und wo im Skript zu schreiben ist. 1. Wie Sie Daten von URL abrufen und in Combo-Werte platzieren. Ich möchte in einfaches Javascript.

Dies ist meine JSON-Daten

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

Update-Code:

<!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>

Quelle

2017-05-02 shanky singh

zu Hause aus arbeiten Problem scheint wie. –

hast du über Ajax gelesen? http://api.jquery.com/jquery.ajax/ –

Werde mich freuen, wenn ich Hilfe bekomme. –

1) hinzugefügt I id-Attribut auf die Auswahlbox 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>

Quelle

2017-05-02 09:50:37 JYoThI

Muss ich eine Funktion in einem Skript-Tag –

schreiben Sie einfach den Code in das Skript-Tag – JYoThI

jquery enthalten zweimal entfernen Sie eine und entfernen Sie diese Zeile es funktioniert @shankysingh – JYoThI

Mit Ihrer JSON-Daten und das Attribut id="choose" Sie über die jsonc Array iterieren und neue Optionen wie folgt hinzu:

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>

Quelle

2017-05-02 09:46:25

Danke für die Antwort. Muss ich in eine 'irgendeine Funktion' unter Skript-Tag schreiben und dann muss ich diese Funktion aufrufen. –

Sie können die Lösung in Ihrem Code verwenden und die "einige Funktion" erstellen. –

Wie erhalten Combo-Wert dynamisch

Antwort

Verwandte Themen