时间戳

首页 > 解决方案 > jquery选择下拉更新

jquery - jquery选择下拉更新

问题描述

我创建了一个从 sql 数据库填充的表单选择下拉列表。sql 表行是：Last_Name、First_Name、eMail 和 ID。

echo'<div>';
echo'<select data-placeholder="Select Contact..." class="chosen-select3" style="width:380px;" tabindex="0" name="acc_contact" id="acc_contact">';
echo'<option value=""></option>';

//----- get contact from table Contacts

$my_query="(SELECT * FROM `Contacts` ORDER BY `Contact_Last_Name` ASC)";
$my_result = mysqli_query($con,$my_query);
while ($my_row = mysqli_fetch_array($my_result, MYSQLI_ASSOC)){
    $contact_options.="<OPTION VALUE=\"".$my_row["id"]."\">".$my_row["Contact_First_Name"]." ".$my_row["Contact_Last_Name"]."</OPTION>"."\n";
}

echo $contact_options;
echo '</select>';    
echo '</div>';

一切正常，但是如何将新帐户添加到下拉列表中？

例如：新联系人应该是 Jane Doe，jd@acme_new.com。

我的想法是打开一个输入表单，询问完整数据（名字、姓氏和电子邮件）并将名称添加到下拉列表中。

$('.chosen-select').chosen({
  no_results_text: "Name not found" 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">

<div>
  <select data-placeholder="Select Contact Name..." class="chosen-select" multiple style="width:350px;" tabindex="4">
    <option value=""></option>
    <option value="1">John Doe</option>
    <option value="2">Jane Unknown</option>
    <option value="3">Jim Smith</option>
  </select>    
</div>

标签： jquerysqljquery-chosen

解决方案

好的，我找到了解决方案。jquery.choosen 有 2 个不同的分支。如果我使用版本： koenpunt/chosen 它可以工作。它不适用于 Harveshq 中的 Chosen (v1.8.7)。

选择的 Koenpunt 叉子。

新脚本是：

<script type="text/javascript">   
 $(document).ready(function () {   
  $('.chosen-select').chosen({   
    create_option: true,   
    persistent_create_option: true,  
    skip_no_results: true,   
    create_option_text: 'add Contact'    
  });    
  });    
</script>

推荐阅读