在其他下拉菜单中选择更改下拉菜单值

Question

Need experts opinion on below mentioned code, i am not good with javascript. please help

what i need is,i have 2 drop downs. one is catid1 and 2nd is catid ... catid loads some values from databases, and catid1 have some manual entries, few of them are same and few are different. but i want is when i will select catid1 value from list like "abc" then catid value should be changed to same as catid1 "abc" i have tried some different ways but can't resolve this, any one please suggest either this could be possible or not.

<div class="col-md-4">
    <div class="form-group">
        <label for="catId"><?php echo $categoryField; ?></label>
        <select class="form-control" name="catId1" id="catId1" onChange="qt();">
            <option> Select Base Query Type </option>
        </select>
        <span class="help-block"><?php echo $categoryHelp; ?></span>
    </div>
</div>
</div>

<div class="col-md-4">
    <div class="form-group">
    <label for="catId"><?php echo $categoryField; ?></label>
    <select class="form-control" name="catId" id="catId">
        <?php
        $tcat = "SELECT catId, catName FROM categories WHERE userId = ".$userId." AND isActive = 1  ";
        $rest = mysqli_query($mysqli, $tcat) or die('-2'.mysqli_error());
        ?>
        <option value="..."><?php echo $selectOption; ?></option>
        <?php while ($tcatrow = mysqli_fetch_assoc($rest)) { ?>
        <option value="<?php echo $tcatrow['catId']; ?>"><?php echo clean($tcatrow['catName']); ?></option>
        <?php } ?>
    </select>
    <span class="help-block"><?php echo $categoryHelp; ?></span>
    </div>
</div>
</div>

sample code which i have tried is as below as well but it's not working in my case.

<select name="dropdown[]">
  <option value="1">Sony</option>
  <option value="2">Nintendo</option>
  <option value="3">Microsoft</option>
</select>

<select name="dropdown[]">
  <option value="1">Sony</option>
  <option value="2">Nintendo</option>
  <option value="3">Microsoft</option>
</select>

<select name="dropdown[]">
  <option value="1">Sony</option>
  <option value="2">Nintendo</option>
  <option value="3">Microsoft</option>
</select>

var selects = document.querySelectorAll('select[name="dropdown[]"]');

selects[0].addEventListener('change', function () {
    for (var i = 0; i < selects.length; i++) {
        selects[i].value = selects[0].value;
    }
});

Answer 1

You forgot your script tags in the second example:

<select name="dropdown[]">
   <option value="1">Sony</option>
   <option value="2">Nintendo</option>
   <option value="3">Microsoft</option>
</select>

<select name="dropdown[]">
  <option value="1">Sony</option>
  <option value="2">Nintendo</option>
  <option value="3">Microsoft</option>
</select>

<select name="dropdown[]">
  <option value="1">Sony</option>
  <option value="2">Nintendo</option>
  <option value="3">Microsoft</option>
</select>

<script language="javascript">
    var selects = document.querySelectorAll('select[name="dropdown[]"]');
  selects[0].addEventListener('change', function () {
    for (var i = 0; i < selects.length; i++) {
      selects[i].value = selects[0].value;
    }
  });
</script>

jsfiddle: https://jsfiddle.net/ge127u8d/

Answer 2

Yes you can do it by javascript or Jquery. Its easier in Jquery like

function qt() {
  var catId1Val = $('#catId1 :selected').val();
  $("#catId> option").each(function() {
     if (this.value == catId1Val)
     $("#catId select").val(this.value);
  });
}

Check out the following jQuery method:

• http://api.jquery.com/val/
• http://api.jquery.com/each/
• http://jsfiddle.net/Rx3AP/