使用jquery在select中存储单击的选项链接

时间:2012-01-25 10:24:49

标签: javascript jquery html

好的,所以我有这段代码:

$(function(){
    // TODO make this work
    $('select#selList').change(function(){
       if($(this).val()=="alpha"||$(this).val()=="date"|$(this).val()=="nil")
            $selectedValue=0;   
       else
            $selectedValue=$(':selected').val();    

       $options=$('#selList').children('option');
       $arrVals=[];
       $options.each(function({
           if($(this).val()=="alpha"||$(this).val()=="date"|$(this).val()=="nil")
           {
            return true;    
           }
                            else
                                {
                                    $arrVals.push({
                                        valx:$(this).val(),
                                        txtx:$(this).text(),
                                        datex:$(this).attr('date')
                                    });
                                }

                        });
                        var sort_by = function(field, reverse, primer)
                        {

                            var key = function (x) {return primer ? primer(x[field]) : x[field]};

                                return function (a,b) {
                                        var A = key(a), B = key(b);
                                        return ((A < B ? -1 :(A > B) ? +1 : 0)) * [-1,1][+!!reverse];
                                }
                        }

                switch($(':selected').attr('id'))
                {   
                    case 'alpha':
                        $arrVals.sort(sort_by('txtx',true,false));
                    break;

                    case 'date':
                        $arrVals.sort(sort_by('datex',true,false));
                    break;

                }

                $(this).html("");
                for(var i=0, m=$arrVals.length;i<m;i++)
                {
                        $($options[i]).text($arrVals[i].txtx);
                        $(this).append($options[i]);
                }
                $(this).append('<option value="nil" id="nil">---------------------------</option><option value="alpha" id="alpha">Sort alphabeticaly</option><option value="date" id="date">Sort by date</option>')
                $(this).val($selectedValue);

            });
        });

现在我想要的是存储所选的选项,如果它延迟了“----”,“按字母排序”和“按日期排序”选项,并保持选择现在我的成功点击是什么和列表中选项的顺序。

HTML如下:

    <select id="selList" multiple style="height:150px">
        <option value="1" date="20120126">A</option>
        <option value="2" date="20120124">D</option>
        <option value="3" date="20120125">B</option>
        <option value="4" date="20120129">C</option>
        <option value="nil" id="nil">---------------------------</option>
        <option value="alpha" id="alpha">Sort alphabeticaly</option>
        <option value="date" id="date">Sort by date</option>
    </select>

感谢您的帮助:)

1 个答案:

答案 0 :(得分:1)

尝试一下:(您可以将函数体添加到现有函数中)

$('#selList')
  .change(function()
          {
          var col=$('option:selected',this)
                  .filter(function(){return !isNaN(this.value);});
              if(col.length)
              {
                $(this).data('selected',col);
              }
          }
      );

Onchange它会收集所有具有数值的选定选项。如果有,则将此集合存储为select中的数据。