Question

目前，我正在使用我无法访问下拉列表的perl生成选项的网站。下拉列表是动态填充的，并非所有用户都可以使用所有选项。

我可以使用的代码如下所示。

<select class="fielddrop" name="PRIMARY_POS" size="1" style="width: 187px;" ></select>

PRIMARY_POS

填充可以选择的每个选项。

页面呈现时看到的实际输出是

<select class="fielddrop" name="PRIMARY_POS" size="1" style="width: 187px;">

<option value="0">None Selected
<option value="155935">Option4
<option value="155934">Option3
<option value="155905">Option2
<option value="155933">Option1
<option value="155932">Option5   

</select>

我需要做的是根据基于文本值分配的隐藏属性设置排序顺序

所以在上面的例子中。我需要下拉（重要的是因为它们是页面上的多个下拉列表）才能按尚未创建的属性进行排序

以上代码可能就是

<option value="0">None Selected
<option sortvalue="5" value="155935">Option4
<option sortvalue="4" value="155934">Option3
<option sortvalue="3" value="155905">Option2
<option sortvalue="2" value="155933">Option1
<option sortvalue="1" value="155932">Option5     

</select>

设置的sortvalue基于选项select的Text值。因此，将为Option4分配5的排序值。只需要分配文本即可。

最终结果应该是下拉列表现在具有Sortvalue的自定义属性，并且选择下拉列表现在按该值排序。

再一次，我无法直接更改属性，但可以操纵结果。希望这很容易遵循，我怀疑：/

Answer 1

您可以创建一个对象，其中键是文本，值是排序顺序。然后循环选项并根据该地图添加属性

var optsMap = {
  "Option4": 5,
  "Option5": 1
   ......
};

var $select =  $('select[name=PRIMARY_POS]')

$select.find('option').attr('data-sortvalue', function(){
   return optsMap[$(this).text()] ||0;      
}).sort(function(a,b){
    return +($(a).data('sortvalue')||0) - +($(b).data('sortvalue')||0);
}).appendTo($select);

然后您可以使用以下方法读取值：

$select.change(function(){
   alert($(this).find(':selected').data('sortvalue'));
})

如果您只需要排序而不需要属性就可以删除一步

的 DEMO

Answer 2

通常的做法是在那些＆＃34;添加的属性前加上＃34;与data。如果我能正确理解你，你可以尝试使用jQuery这样的东西。

示例小提琴：https://jsfiddle.net/30cvudz8/7/

<select class="my-select">
    <option data-sort-value="3" value="1">Option 1</option>
    <option data-sort-value="5" value="2">Option 2</option>
    <option data-sort-value="4" value="3">Option 3</option>
    <option data-sort-value="1" value="4">Option 4</option>
    <option data-sort-value="2" value="5">Option 5</option>
</select>



var optionList = new Array();
$('select.my-select option').each(function() {
    optionList[optionList.length] = $(this).attr('data-sort-value')+'::'+$(this).val();
});
optionList.sort(); // sort it 
var newOptionList = '';
for(var i = 0; i < optionList.length; i++) {
    // recreate option
  var parts = optionList[i].split('::');
  newOptionList += '<option value="'+parts[1]+'" data-sort-value="'+parts[0]+'">Option '+parts[1]+'</option>';
}

// wipe and repopulate the select list
$('select.my-select').html(newOptionList);

要在选择列表后添加属性（如数据排序值），您可以执行以下操作：

$('select.original option').each(function() {
    var sortingValue = getSortingValueFromText($(this).text());
    $(this).attr('data-sort-value', sortingValue);
});

对添加了atrribute或id的下拉列表进行排序

PRIMARY_POS

2 个答案: