Victor Viegas Victor Viegas - 2 months ago 6
Javascript Question

JavaScript - Changing a <select> data from another <select>

I'm trying to make a dynamic select.
When i select a certain data in one select, the other change his view of data.
Nothing that you all already didn't see, right?

But i'm new with javascript codes, still learning..
i tried something like https://jsfiddle.net/victorviegas/7yLjmfqz/



var selectchild = $('select[name="selectChild"] option');
$('select[name="selectFather"]').on('change', function() {
var selectfather = this.value;
var newSelect = selectchild.filter(function() {
return $(this).data('example') == selectfather;
});
$('select[name="selectChild"]').html(newSelect);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selectFather">
<option value=""></option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
<br/>
<br/>
<br/>
<select name="selectChild">
<option data-example="a" value="a">a</option>
<option data-example="a" value="aa">aa</option>
<option data-example="a" value="aaa">aaa</option>
<option data-example="b" value="b">b</option>
<option data-example="b" value="bb">bb</option>
<option data-example="b" value="bbb">bbb</option>
<option data-example="c" value="c">c</option>
<option data-example="c" value="cc">cc</option>
<option data-example="c" value="ccc">ccc</option>
</select>





The javascript get the "data-example" and show in the other select only the values of the same "data-example".
What i don't know how to do is:

1 - When you test my code, you can see that if you select a data in the first select, the second always shows the right content, but the last instead the firsts... How can i change the second select to start show values from top to bottom?

2 - There's a way to use this script to make the second select show values like "onLoad" or something? the values are simply put that moment instantly and the current page dont process que it has changed.
- For instance:
if i put on the HTML selected="selected"

<select name="selectFather">
<option value="a" selected="selected">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>


the second select doesn't load the values i want.

Thanks, guys! I'll keep trying!

Answer

I tried somethings, then i solved parts of my problems.

For the first question, i've added the code:

$('select[name="selectChild"]').html(newSelect).prop("selectedIndex", 0);

Then, for the second question (that i'm still working on), i'm getting close.... putting the code " trigger('change'); " in the end of the same line, will load the html and change de values dinamically.

$('select[name="selectChild"]').html(newSelect).prop("selectedIndex", 0).trigger('change');

This works! But not with the default value null. Because im using the "change" event.

var selectson = $('select[name="selectSon"] option');
$('select[name="selectFather"]').on('change', function() {
  var selectfather = this.value;
  var newSelect = selectson.filter(function() {
    return $(this).data('example') == selectfather;
  });
  $('select[name="selectSon"]').html(newSelect).prop("selectedIndex", 0).trigger('change'); ;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selectFather">
  <option value=""></option>
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
</select>
<br/>
<br/>
<br/>
<select name="selectSon">
  <option data-example="a" value="a">a</option>
  <option data-example="a" value="aa">aa</option>
  <option data-example="a" value="aaa">aaa</option>
  <option data-example="b" value="b">b</option>
  <option data-example="b" value="bb">bb</option>
  <option data-example="b" value="bbb">bbb</option>
  <option data-example="c" value="c">c</option>
  <option data-example="c" value="cc">cc</option>
  <option data-example="c" value="ccc">ccc</option>
</select>

I want that the second select shows nothing if the first select data isn't picked.. when the page is loaded.

Well.. i'll mark this as an ok answer. And i'll open another to figure out what event should i use to get what i want.

Here's the fiddle if anyone to change anything... =)

Thanks for everyone who tried help me.