当前位置: 首页 > 面试题库 >

使用jQuery按值属性对选择选项进行排序

韩华美
2023-03-14
问题内容

好吧,标题说明了一切。我正在做的是创建一个特色产品模块。使用JSON填充尺寸的下拉列表,并且我使用把手来呈现html。我无法控制JSON文件。我尝试通过选项标签中的实际文本对选项值进行排序,但后来我意识到选项值是错误的。因此,现在我尝试按其值属性对选项进行排序,但尚未弄清楚。我正在尝试做这样的事情:

var selectList = $('#featuredSelectField option');
var newList = [];
var theNewNew = [];
for(var i=0; i<selectList.length; i++){
    newList[i]=(selectList[i].value);    
}
newList.sort();
for(var i=0; i<newList.length; i++){
    theNewNew[i] = $('#featuredSelectField option[value="'+newList[i]+'"]');
    selectList[i] = theNewNew[i];
}

这是HTML:

<select id="featuredSelectField" name="addid7617843" size="1">
    <option value="" data-value="">Select an option</option>
    <option value="10493640" data-value="10493640" data-qty="30" data-mxqty="30">Size 5.5 - $111.99</option>
    <option value="10493639" data-value="10493639" data-qty="120" data-mxqty="50">Size 5 - $111.99</option>
    <option style="display: none;" disabled="disabled" value="10792504" data-value="10792504" data-qty="0" data-mxqty="0">Size 10 - $111.99 Sold Out</option>
    <option value="10493644" data-value="10493644" data-qty="138" data-mxqty="50">Size 7 - $111.99</option>
    <option value="10493642" data-value="10493642" data-qty="22" data-mxqty="22">Size 6.5 - $111.99</option>                
    <option value="10493641" data-value="10493641" data-qty="57" data-mxqty="50">Size 6 - $111.99</option>              
    <option value="10493648" data-value="10493648" data-qty="99" data-mxqty="50">Size 9 - $111.99</option>      
    <option value="10493647" data-value="10493647" data-qty="28" data-mxqty="28">Size 8.5 - $111.99</option>                
    <option value="10493646" data-value="10493646" data-qty="74" data-mxqty="50">Size 8 - $111.99</option>                  
    <option value="11288830" data-value="11288830" data-qty="1" data-mxqty="1">Size 4.5 - $111.99</option>
    <option value="10493645" data-value="10493645" data-qty="51" data-mxqty="50">Size 7.5 - $111.99</option>                    
    <option value="10792503" data-value="10792503" data-qty="5" data-mxqty="5">Size 9.5 - $111.99</option>
    <option value="11288831" data-value="11288831" data-qty="6" data-mxqty="6">Size 4 - $111.99</option>
</select>

问题答案:
var selectList = $('#featuredSelectField option');

selectList.sort(function(a,b){
    a = a.value;
    b = b.value;

    return a-b;
});

$('#featuredSelectField').html(selectList);

在这里,您可以找到一个演示并将结果与​​原始结果进行比较:http :
//jsfiddle.net/74c2M/3/

在这里您可以找到正确的代码:http :
//jsfiddle.net/74c2M/4/

祝好运 !



 类似资料:
  • 问题内容: 我有这样的HTML, 现在,我需要编写一个jQuery,它将我的html中的所有属性都设为disable_onclick属性设置为true。在这种情况下,我应该获得3个元素,两个链接标签和一个输入标签。 问题答案: 这里的如何选择所有这些元素: 由于是CSS中有效的未加引号的属性值,因此您甚至可以省略引号: 如果您关心有效的HTML,则应考虑改用自定义属性。 这样,它就是有效的HTML

  • 问题内容: 我正在尝试按字母顺序了解元素内的排序元素。理想情况下,我想将此作为一个单独的函数,在这里我可以只传递select元素,因为在用户单击某些按钮时需要对它进行排序。 我在高低处搜寻了一种执行此操作的好方法,但找不到任何对我有用的方法。 选项元素应按文本而不是值按字母顺序排序。 这有可能吗? 问题答案: 我要做的是: 将每个文本和值提取到对象数组中; 对数组进行排序; 按顺序使用数组内容更新

  • 问题内容: 当我想更改所选选项时,我的反应有问题。问题在于该值是一个对象,我无法在选项值属性中传递它。 请参见以下代码: 与 我需要使用所选选项的值更改组件的状态。状态改变时我得到什么。我想发生这种情况是因为react无法将javascript对象嵌入最终视图的属性中。我是正确的? 而且,我在构造函数中将state 设置为null是否有正确的方法? 问题答案: 您可以利用的 此外,我在构造函数中将

  • 问题内容: 如果我有一个JavaScript对象,例如: 有没有一种方法可以基于值对属性进行排序?这样我最终 问题答案: 将它们移动到一个数组,对该数组进行排序,然后将其用于您的目的。这是一个解决方案: 拥有数组后,您可以按自己喜欢的顺序从数组中重建对象,从而完全实现了您打算要做的事情。在我所知道的所有浏览器中都可以使用,但这取决于实现的怪癖,并且可能随时中断。您永远不应假设JavaScript对

  • 问题内容: 我正在尝试根据子属性的值来过滤jmespath中对象的属性,并且只想包括那些将子属性设置为特定值的属性。 根据此示例数据: 我想要一个具有启用该功能的所有属性的对象。 我想我可以使用此jmespath查询来过滤设置为true 的对象。不幸的是,它似乎不起作用,而是返回一个空数组。 或只返回布尔值而没有任何上下文。 即使true 可行,也只是属性值的数组,但我也需要键(和)。有什么办法可

  • 我有以下XML。 我在http://chris.photobooks.com/xml/default.htm上查看了它,它显示xpath无效,不确定问题出在哪里。