Javascript 顺序选择列表按文本 alphe 而不是值

Javascript order select list by text alphe and not value

本文关键字：alphe 文本 顺序 选择 列表 Javascript      更新时间：2023-09-26

我的JS调用我的数据，构建动态3级选择选项菜单非常好

我更改了类别选择选项的文本，它也在工作..现在我必须重新排序 ma 选择列表，不是在选项值上，而是按照 alpha 文本顺序。

我的 JS ：

if (window.XMLHttpRequest) {
oXmlhttp = new XMLHttpRequest();
 } else if (window.ActiveXObject) {
 oXmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 }
 function selectManufacturer(id) {
 document.getElementById('subcategory').innerHTML = "";
 oXmlhttp.open('POST',"recherche-listesderoulantes-resultats.php");
 oXmlhttp.onreadystatechange=function() {
 if (oXmlhttp.readyState==4 && oXmlhttp.status == 200) {
 leselect = oXmlhttp.responseText;
 document.getElementById('category').innerHTML = leselect;
 }

 var strMessage1 = document.getElementById("category") ;
 strMessage1.innerHTML = strMessage1.innerHTML
 .replace('option   value="13446">XXXXX</option>','<option value="13446">NEW TEXT 1</option>')
 .replace('option value="13449">YYYYY</option>','<option value="13449">NEW TEXT 2</option>');
 }
  oXmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 var data = 'q=m&id='+id;
 oXmlhttp.send (data);
 }
 function selectCategory(manufacturer,category) {
 oXmlhttp.open('POST',"recherche-listesderoulantes-resultats.php");
 oXmlhttp.onreadystatechange=function() {
 if (oXmlhttp.readyState==4 && oXmlhttp.status == 200) {
 leselect = oXmlhttp.responseText;
 document.getElementById('subcategory').innerHTML = leselect;
 }
 }
 oXmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 var data = 'q=c&manufacturer='+manufacturer+'&id='+category;
 oXmlhttp.send (data);

我的网页

 <form method="get" action="recherche-listesderoulantes-resultats.php">
  <select style="width: 80%" id="manufacturers_id" name="manufacturers_id" onchange="selectManufacturer(this.value);">
 <option value='-1'>Select</option>
 <option value="1739" >Brand</option><option value="5794" >Brand 1</option>$<option      value="1753" >Brand 2</option></select>
 <div id='category' style='display:inline'>
 </div>
 <div id='subcategory' style='display:inline'>
 </div>
 </form

现在一切都还可以，但我试图理解如何在替换变量后使用文本 alpha 值而不是值选项对类别列表进行新排序......

谢谢！！！

虽然不能对元素使用 JavaScript 排序，但可以从选项元素的文本创建一个数组，然后重置选项元素的文本，如下所示：

var sel = document.getElementById('manufacturers_id');
var asel = [];
for (var i=1; i<sel.length; i++) { //omit Select
  asel.push(sel[i].text);
}
asel.sort()
for (var j=0; j < asel.length;j++) {
    sel[j+1].text = asel[j];
    alert(sel[j+1].text);
}

请参阅 jsfiddle 注意，我将品牌 1 文本更改为品牌 3，以说明选择下拉列表反映了新的排序顺序。

相关文章：