帶自動更新和自動更新的HTML下拉菜單

我正在嘗試開發基於html，css的網頁。我使用PHP進行服務器端腳本編寫。我想要一個下拉菜單與可用選項一起顯示，但同時我需要這個下拉列表來接受文本。所以我可以從下拉列表中選擇以及從文本框中選擇任何我想要的。我發現了上述場景的一個解決方案，並且工作正常，但是當我在文本框中寫入某些東西時（這不是下拉列表的選項），下次它會自動包含它時，我還需要額外多少個解決方案。帶自動更新和自動更新的HTML下拉菜單

例如 - > 目前我的下拉是有說三個選項「三星」，「索尼」，「蘋果」

<option value="one">Samsung</option> 
<option value="two">Sony</option> 
<option value="three">Apple</option>

現在，「Lenevo」不可用。第一次在文本框中，我會將「Lenevo」作爲我的選擇，然後將它包含到下拉菜單中。

<option value="one">Samsung</option> 
<option value="two">Sony</option> 
<option value="three">Apple</option> 
<option value="four">Lenevo</option>

。。

就像它會發生。

感謝您的幫助.. :)

來源

2016-11-21 Sourajit Roy Chowdhury

https://select2.github.io/ – Ima

最好的解決辦法就像是select2。（JavaScript的）

對於例子看看這裏：Link

如果你想留在PHP只，你需要提供一個從提交文本值：

（聲明：該解決方案是非常不好的做法但它是如何解決這個問題，在低級別的例子。）

1）提供了一個形式

<input type="text" name="addSelection">

2）閱讀POST請求

$newOption = $_POST["addSelection"];

3）堅持新選項的地方（此處會議，也可能是數據庫）

$_SESSION["additionalOptions"][] = $newOption;

4）標準選項

$options = ["apple","banana"]; 
$options = array_merge($options,$_SESSION["additionalOptions"]);

5）創建HTML

選項合併

<select name="fruits"> 
    <?php 
     foreach($options as $option){ 
      echo '<option value="'+$option+'">'+$option+'</option>'; 

     } 
    ?> 
</select>

來源

2016-11-21 10:23:36 Mruf

由於它工作正常。但爲什麼你只告訴PHP是不好的做法？ –

不可以。只有PHP纔是不錯的做法。我提供的方式是有點...不保留或不會，對不起找不到合適的詞 – Mruf

好的確定..非常感謝... :) –

使用se LECT2插件 https://github.com/select2/select2

<script type="text/javascript" src="/assets/profile/js/select2.min.fda43621.js"></script> 

var validateTag = function (term, data) { 
    var value = term.term; 
    var re = /^[a-z\d\-_\s]+$/i; 
    if (re.test(value))) { 
     return { 
      id: value, 
      text: value 
     }; 
    } 
    return 'wrong_characters'; 
}; 
$("#selectAlt").select2({tags: true, maximumSelectionLength: 6, maximumInputLength: 20, createTag: validateTag});

HTML：

<select name="selectAlt[]" id="selectAlt" multiple="multiple" custom-placeholder="Genre"> 
<option value="Blues">Blues</option>         
<option value="Classic Rock">Classic Rock</option>         
<option value="Country">Country</option> 
</select>

來源

2016-11-21 10:28:46 Ima

帶自動更新和自動更新的HTML下拉菜單

回答

相關問題