從下拉列表中選擇選項

Question

我正在為一個新的美食博客構建一個食譜查找器。 我的設計基本上涉及用戶選擇成分，一次一個，從下拉<select> ，選項從列表中消失（所以他們不能 select 再次出現）並出現在另一個 HTML 列表中，並帶有指向將其從列表中刪除。 完成后，他們單擊一個按鈕，然后進入結果頁面。

這是由 PHP 生成的 select 標記：

<select>
    <option value="">Please select</option>
    <option value="beef-mince">Beef mince</option>
    <option value="carrots">Carrots</option>
    ...
</select>

它不是非常復雜，但它確實提出了一些關於我將如何做這些事情的問題。 我正在使用 jquery。

1. 我需要將所選項目存儲在 memory 中，這樣我就知道在他們完成選擇項目后要發送到搜索頁面的內容。 在您看來，最好的方法是什么，因為每個項目都有兩個值（它的“真實”值和它的數據庫值）？

2. 在他們選擇了某些東西（最好不觸發 onchange 事件）之后，如何使“請選擇”選定的選項？

3. 一旦我將它存儲在 memory 並將其添加到他們正在搜索的顯示列表中，我如何從可用項目中刪除該項目？ 我可以（安全地）“隱藏”或禁用它嗎？

4. 如果在#3 中我必須從 DOM 中刪除它，當我再次添加它時，我可以對列表進行排序（基於任一值）並將 please-select 選項保留在頂部嗎？

Answer 1

1.) 您可以將 append 隱藏表單元素到頁面，其值為所選選項的值。

2.) jQuery("#select-list")[0].options[0].selected = true // assuming it's the first item

3.) 我會使用 jQuery("#select-list option:selected").remove() 從 DOM 中刪除元素

4.) 你可以使用 before()。 jQuery(your_default_option).before("#select-list option:first");

Answer 2

1）基本思路，你需要檢查以確保第一個沒有被選中

var selections = [];
var mySel = document.getElementById("mySelectId");
var ind = mySel.selectedIndex;
selections.push( mySel.options[ind].value ); //add to a list for you to remember
mySel.options[ind] = null; //remove

2) mySel.selectedIndex = 0;

3) 見#1

4）是的，您可以使用 insertBefore 將其添加到您想要的任何位置

此處示例： http://www.pascarello.com/lessons/forms/moveSelectOptions.html

Answer 3

1. 您可以將“兩個值”作為 JSON 表示法的 object 存儲在隱藏表單字段中。 當用戶與頁面交互時，這將使 jQuery 中的修改變得容易。

2. 您將需要結合使用 onchange、keyup 和 keydown 事件來捕獲對表單的可能更改，以便您可以重新選擇“請選擇”選項。

3. 您需要從 dom 中刪除該選項並稍后重新添加。 您可以通過 jquery 通過以下方式輕松完成此操作：

   $("選擇選項：選擇").remove();

4. 您可以為從索引 1 開始的選項編寫排序 function，並將“請選擇”保留為第一個選項。

Answer 4

將把這個答案留在這里，但我認為我沒有閱讀你的整篇文章，所以它可能沒有多大幫助。

你需要給你的 select 一個這樣的 id：

<select id="MySelect">        
    <option value="">Please select</option>
    <option value="beef-mince">Beef mince</option>
    <option value="carrots">Carrots</option>
    ...
</select>

得到它就是這樣的：

<?php
    $value = $_REQUEST["MySelect"];
    echo $value;
?>

代碼未經測試，並且 $_REQUEST 可以替換為 $_GET 或 $_POST 關於您在表單上指定為操作的內容。 $_REQUEST 會吃掉它。