1st dropdown name selection displays email value in 2nd dropdown

0
votes
  1. I have 2 drop-downs.
  2. The drop-downs are dynamically populated.
  3. What works: If name1 (drop-down1) is selected then email1 (drop-down2) is selected. (the js works).
  4. What's not working: After selecting name1, if I select name4 email2 is displayed. What's happening is drop-down2 is going in numbered order rather than what's selected in drop-down1 order.
  5. What should happen: The name selected should display the email that corresponds with that name. Example: name1 = email1, name2 = email2, name3 = email3, name4 = email4, name5 = email5, etc.

HTML 

 <select id="names" name="names" onchange="change(this.value);">
    <option value="0"></option>
    <option value="name1">name1</option>
    <option value="name2">name2</option>
    <option value="name3">name3</option>
    <option value="name4">name4</option>
    <option value="name5">name5</option>
    </select>

    <select id="emails" name="emails" onchange="change(this.value);">
    <option value="0"></option>
    <option value="email1">email1</option>
    <option value="email2">email2</option>
    <option value="email3">email3</option>
    <option value="email4">email4</option>
    <option value="email5">email5</option>
    </select>

JS

function change(value) {

     var names = document.getElementById('names');

     var emails = document.getElementById('emails');


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

        if (names.options[i].value == '0') {

         emails.remove(i);

    }

    }

    }
2
javascriptjqueryhtmldrop-down-menu
It is not that it is selecting anything, you are removing the emails every time you select a name, so it just selects the next available email. What is it that you are actually trying to accomplish? - Hanlet Escaño
If they will always have the same order, this is the simplest solution I could come up with: jsfiddle.net/gcafhmyp - Hanlet Escaño

2 Answers

1
votes

While you tagged a jquery this is a jquery solution

function change(el , value) {
  var names = $('.select'),
      selected_index = $(el).find('option:selected').index();
  $('.select').not($(el)).find('option:eq('+selected_index+')').prop('selected',true);

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select" id="names" name="names" onchange="change(this , this.value);">
    <option value="0"></option>
    <option value="name1">name1</option>
    <option value="name2">name2</option>
    <option value="name3">name3</option>
    <option value="name4">name4</option>
    <option value="name5">name5</option>
    </select>

    <select class="select" id="emails" name="emails" onchange="change(this , this.value);">
    <option value="0"></option>
    <option value="email1">email1</option>
    <option value="email2">email2</option>
    <option value="email3">email3</option>
    <option value="email4">email4</option>
    <option value="email5">email5</option>
    </select>

Steps:

1- don't forget to include jquery

2- give both of your <select> a class class="select"

3- your function will be change(el , value)

4- use the function like onchange="change(this , this.value);"

0
votes

Try

function change(value){
    var emails = document.getElementById('emails');
    var emailValue = value.replace("name", "email");
    for(var i = 0; i < emails.length; i++){
        if(emails.options[i].value == emailValue){
            emails.options[i].selected = true;
        }
        else {
            emails.options[i].selected = false;
        }
    }
}

I think that should work.