dynamisch hinzufügen Dropdown-Liste aus json

Ich bin mit Bootstrap Wählen Sie mit dem folgenden:dynamisch hinzufügen Dropdown-Liste aus json

1) mein Benutzer json Array wie folgt aussehen: [{ "usr": 1, "name": "Bob"} , {"usr": 3, "name": "Janet"}, {"usr": 6, "name": "Perry"} ...

Anstelle der Optionen Senf, Ketchup und Relish I Ich möchte die Dropdownliste dynamisch aus dem JSON-Array erstellen, wobei der Wert = usr und text displayed = name ist.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
<title>Bootstrap 101 Template</title> 

<!-- Jquery & Bootstrap --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 


<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
         integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 
         integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
         integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 



<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.min.css"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script> 

<!-- (Optional) Latest compiled and minified JavaScript translation files 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/i18n/defaults-*.min.js"></script> --> 

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
<!--[if lt IE 9]> 
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
<![endif]--> 

<style> 
.selected { 
    background-color: lightblue; 
    color:#000; 
    text-shadow:0 1px 0 rgba(0, 0, 0, 0.4); 
} 

.dropdown-menu>li>a:hover { 
    background-color: lightblue!important; 
    background-image:none!important 
} 
</style> 

<script type="text/javascript"> 
// global Javascript variables 
    users = <?php echo json_encode($users); ?> 
</script> 





</head> 
<body> 
<form action="select.php" method="POST"> 
    <div style='margin:0 auto;text-align:center'> 
     <h1>Select Box!</h1> 
     <br> 

     <select name='crewNames[]' class="selectpicker" data-width="15%" multiple data-selected-text-format="count"> 
      <option>Mustard</option> 
      <option>Ketchup</option> 
      <option>Relish</option> 
     </select> 
     <br><br> 
     <button type="submit" >Update</button> 
    </div> 
</form> 
</body> 




<script> 
$(document).ready(function() { 
$('.selectpicker').selectpicker('val', ['Mustard']); 

}); 
</script> 

</html>

Quelle

2016-11-30 DCR

$(document).ready(function() { 
    users = <?php echo json_encode($users); ?> 
    users = JSON.parse(users); 

    $('#crew-names').empty(); 
    $.each(users, function(index, element) { 
     var option = $('<option>').attr('value', element.usr).text(element.name); 
     $('#crew-names').append(option); 
    }); 
});

Assign crew-names als ID an das Drop-down-Element, so wird es einfacher sein, um das Element auszuwählen und zu manipulieren.

Quelle

2016-11-30 22:29:31 Perumal

Hallo, habe ich versucht, aber ich bekomme eine unerwartete Kennung auf Benutzer = JSON.parse (Benutzer) Ich löschte die Zeile und es funktioniert! Danke für Ihre Hilfe – DCR

Gern geschehen. :) und ich war mir nicht sicher, ob der Code ' 'gibt JSON-String oder -Objekt an die Variable' users' zurück. Wenn es eine JSON-Zeichenfolge wäre, müssten Sie JSON.parse (Benutzer) verwenden. – Perumal

dynamisch hinzufügen Dropdown-Liste aus json

Antwort

Verwandte Themen