下拉列表增强缺失值

Question

I have a dropdown list that populates from the database

<td>    
   <select style="width:100%"class="CounterParty" >
   <?php

      echo '<option selected="selected"></option>';
      $stmt = $conn->prepare("SELECT DISTINCT(CounterParty)
                             FROM dbo.tbl_hist_transactions
                             ORDER BY CounterParty DESC");
      $stmt->execute();
             while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                      echo '<option >'.$row['CounterParty'].'</option>';
             }
    ?>
   </select> 
</td>

How can I modify it so that if I have a new Counterparty field that is not present in the field, the user can simply type in the new value. And it is entered in the database.

Thank You.

Answer 1

Lets assume that this is your example dropdown-list:

<select class="CounterParty">
    <option value="ABC">ABC</option>
    <option value="XYZ">XYZ</option>
    <option value="new">New item</option>
</select>

If you use a JavaScript library like jQuery, you can add a new item to this dropdown-list dynamically when you select the pseudo-option "New Item" and enter the name of a new one. Here is the example code of it:

$('.CounterParty').change( function(){
    var value = $(this).val();
    if (value == 'new') {
        var newItem = prompt('Add new item:');

        if(!newItem) return false;

        $(this).append('<option value"' + newItem + '" selected="selected">' + newItem + '</option>');
    }
});

After the new item was added and the form has been submitted, the value can be stored in the database like any other value too.

Here is the example fiddle: http://jsfiddle.net/Lms1p5a3/