動態地從JSON

我使用的引導選擇具有以下附加下拉列表：動態地從JSON

1）我的用戶JSON數組的樣子： [{ 「USR」：1，「名」：「鮑勃」} ，{「usr」：3，「name」：「Janet」}，{「usr」：6，「name」：「Perry」} ...

而不是選擇Mustard，Ketchup和Relish I想動態創建json數組中的下拉列表，其中值= usr和文本顯示=名稱。

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

來源

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

分配crew-names作爲ID到下拉元件所以這將是容易選擇和操縱元件。

來源

2016-11-30 22:29:31 Perumal

嗨，我試過這個，但我得到了一個意想不到的標識符users = JSON.parse（users）我刪除了該行，它的工作原理！感謝您的幫助 – DCR

歡迎您。 :)我不知道如果代碼'<？php echo json_encode（$ users）; ？>將JSON字符串或對象返回到'users'變量。如果它是JSON字符串，則需要使用JSON.parse（用戶）。 – Perumal

回答

相關問題