Question

171

Sort dropdown list

rated 0 times [ 174] [ 3] / answers: 1 / hits: 28342 / 11 Years ago, tue, august 20, 2013, 12:00:00

I am trying to sort a dropdownlist (selector) in html.

I have two lists, a pre-selection which then should be used to define the content of the secont list.

A short code sample:

<!doctype html>

<html class=>

<head>

<meta charset=utf-8>

<meta name=viewport content=width=device-width, initial-scale=1>



</head>



<body>

<table width=100% border=0>

  <tr>

  <td>&nbsp;</td>

    <td>Product</td>

    <td><select name=product id=product width=300 style=width: 300px>

      <option></option>

      <option id=TLX>TLX</option>

      <option id=FLX>FLX</option>

      <option id=MLX>MLX</option>

    </select></td>

    <td>&nbsp;</td>

  </tr>

  <tr>

  <td>&nbsp;</td>

    <td>Power</td>

    <td><select name=power id=power width=300 style=width: 300px>

      <option></option>

      <option name=TLX>6</option>

      <option name=TLX>8</option>

      <option name=TLX>10</option>

      <option name=TLX>12</option>

      <option name=TLX>15</option>

      <option name=FLX>6</option>

      <option name=FLX>8</option>

      <option name=FLX>10</option>

      <option name=FLX>12</option>

      <option name=FLX>15</option>

      <option name=FLX>17</option>

      <option name=MLX>30</option>

      <option name=MLX>40</option>

      <option name=MLX>60</option>

    </select></td>

    <td>&nbsp;</td>

  </tr>

</table>



</body>

</html>

I want to b able to select the product and then must the power list be sortet accordingly.

For instance if TLX is choosen then only 6, 8, 10, 12, and 15 are shown as possibilities in the second list.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tayla

Add To Favorites

Follow

Total Points: 681

Total Questions: 102

Total Answers: 108

Location: Marshall Islands

Member since Tue, Sep 21, 2021

3 Years ago

tayla questions

1 Problem embedding tiktok video into angular 7

Fri, Mar 5, 21, 00:00, 3 Years ago

1 Lodash - How to merge two arrays of objects based on key?

Wed, Oct 28, 20, 00:00, 4 Years ago

1 Horizontal scroll bar is appearing after using slick slider in the webpage

Wed, Oct 21, 20, 00:00, 4 Years ago

1 Jest: `querySelector` returns null in test of a ReactJS component

Sat, Jul 4, 20, 00:00, 4 Years ago

1 setTimeout with Promises

Thu, Apr 9, 20, 00:00, 4 Years ago

View All

answered 11 Years ago marisela · Accepted Answer

using vanilla you can do like below

see the demo working http://jsfiddle.net/ST5dq/

no use name attribute, use data-name, value or other attribute, the name attribute not working cross browser to option tag...

i'll use data-name

<table width=100% border=0>

  <tr>

  <td>&nbsp;</td>

    <td>Product</td>

    <td><select name=product id=product width=300 style=width: 300px>

      <option></option>

      <option id=TLX>TLX</option>

      <option id=FLX>FLX</option>

      <option id=MLX>MLX</option>

    </select></td>

    <td>&nbsp;</td>

  </tr>

  <tr>

  <td>&nbsp;</td>

    <td>Power</td>

    <td><select name=power id=power width=300 style=width: 300px>

      <option></option>

      <option data-name=TLX>6</option>

      <option data-name=TLX>8</option>

      <option data-name=TLX>10</option>

      <option data-name=TLX>12</option>

      <option data-name=TLX>15</option>

      <option data-name=FLX>6</option>

      <option data-name=FLX>8</option>

      <option data-name=FLX>10</option>

      <option data-name=FLX>12</option>

      <option data-name=FLX>15</option>

      <option data-name=FLX>17</option>

      <option data-name=MLX>30</option>

      <option data-name=MLX>40</option>

      <option data-name=MLX>60</option>

    </select></td>

    <td>&nbsp;</td>

  </tr>

</table>

you can use this to sort the list

function sortDropdownList(ddl){



    var options = [].slice.apply(ddl.options, [0]);

    ddl.innerHTML = ;

    var sorted = options.sort(function(a,b){     

       return +(a.innerText) - +(b.innerText);

    });



    for(var i = 0; i < sorted.length; i++){

      ddl.options.add(sorted[i]);

    }  



}

you need pass a dom element, not a jQuery element.

to bind the select parent to select child you can do this

on you page initialize add the code

var parentSelect = document.getElementById(product);

var childSelect = document.getElementById(power);

var options = [].slice.apply(childSelect, [0]);

var emptyOption = options[0];

childSelect.innerHTML = ;



parentSelect.addEventListener(change, function(e){



    var selectedId = parentSelect.options[parentSelect.selectedIndex].id;

    childSelect.innerHTML = ;

    childSelect.options.add(emptyOption);

    for(var i = 0; i < options.length; i++){



        if( options[i].getAttribute(data-name) == selectedId ){



           childSelect.options.add(options[i]);



        }

    }



    sortDropdownList(childSelect);



});