Question

我有这个输入，允许用户选择（有多个选择）产品：

<select multiple="yes" name="products[]">
    <option value="wood">Wood</option>
    <option value="iron">Iron</option>
    <option value="gold">Gold</option>
    <option value="dust">Dust</option>
    <option value="food">Food</option>
</select>

用户可以选择该列表中的几个东西，我可以使用例如PHP进入服务器端：

$_GET['products'] ← array('wood', 'iron', 'food');

现在，我想允许用户指定他们所做选择的顺序。所以，我希望用户不仅能够设置要选择的项目列表（如<select multiple="yes">），还能够按照我将处理它们的顺序。换句话说，让我们说用户想要将列表命令：

$_GET['products'] ← array('gold', 'iron', 'wood', 'dust');

目前，使用<select multiple="yes">我只能要求用户无序地从列表中选择项目，但

我应该使用哪些HTML标记来允许用户选择多个选项并指定其顺序？

我不想要对<select>内的选项进行排序，我希望用户能够告诉服务器它应该以何种顺序处理所选项目列表

我选择PHP示例作为服务器端处理代码（它是我将使用的语言）但实际上，答案不应该依赖于服务器端语言：I＆＃39;我正在寻找＆＃34; html-client-side＆＃34;要使用的代码。

Answer 1

以下答案并不完全优雅，但它完成了工作。我已经做了很长时间的网络开发，但我还在学习。

JavaScript可能会更好，因为我习惯了jQuery（我知道拐杖）。

纯js（如果你可以使用jQuery则更容易）

var products = [];

function add(val) {
    if (!contains(products, val))
    {
        products.push(val);
        document.getElementById('list').setAttribute('name', products);
    }
}

// checks if arr 'a'  has the element 'obj'
// thanks to someone at stack overflow for how to do that :)
function contains(a, obj) {
   var i = a.length;
   while (i--) {
       if (a[i] === obj) {
        return true;
       }
    }
    return false;
}

HTML

// add the onclick='add()' function to your html
<select id='list' multiple="yes" name="" value='heyo'>
   <option onclick='add("wood")' value="wood">Wood</option>
   <option onClick='add("iron")' value="iron">Iron</option>
   <option onClick='add("gold")' value="gold">Gold</option>
   <option onClick='add("dust")' value="dust">Dust</option>
   <option onClick='add("food")' value="food">Food</option>
</select>

在这里工作jsfiddle：http://jsfiddle.net/TcGt5/

Answer 2

<!-- language: lang-js -->
<script> 
    var jproducts = [];
    var selectCount= 0;
    function myFunction() {
    var select = document.getElementById("mySelect");
   // test if select value already exist 
       options = select.getElementsByTagName('option'),
       for (var i=options.length; i--;) {
          if (options[i].selected) 
               selectCount +=1;
               if (function 'is_not_in_products_array') 
                    jproducts.push(options[i].value)
       }
     // remove unselected products
       for (var j=0; j< (jproducts.length-selectCount); j++;)
          jproducts.shift();
}
</script>

最后，products数组将仅包含最后选择的

<select id="myselect" multiple="yes" name="products[]" onchange="myFunction()">
    <option value="wood">Wood</option>
    <option value="iron">Iron</option>
    <option value="gold">Gold</option>
    <option value="dust">Dust</option>
    <option value="food">Food</option>

HTML标记，允许用户选择多个项目并设置其顺序

2 个答案: