JQuery выбрал выпадающее обновление - PullRequest
Новая
       24

JQuery выбрал выпадающее обновление

0 голосов
/ 04 марта 2019

Я создал выпадающий список выбора формы, который заполняется из базы данных 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>';

Все отлично, но как я могу добавить новую учетную запись в раскрывающийся список?

Например: Новый контактдолжна быть Джейн Доу, jd@acme_new.com.

Моя идея состояла в том, чтобы открыть форму ввода, которая запрашивает полные данные (First, -Lastname & email) и добавить имя в выпадающий список. 

$('.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>

1 Ответ

0 голосов
/ 06 марта 2019

Хорошо, я нашел решение.Есть 2 разных форка jquery.choosen.Если я использую версию: koenpunt / selected, она работает.Он не работает с Chosen (v1.8.7) из Harvesthq.

Выбранная вилка 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>
...