在其他下拉菜單中選擇更改下拉菜單值

Question

需要專家對以下提到的代碼發表意見，我不擅長javascript。 請幫忙

我需要的是，我有2個下拉菜單。 一個是catid1，第二個是catid ... catid從數據庫中加載一些值，並且catid1有一些手動輸入，它們很少相同，而很少不同。 但我想要的是何時我將從“ abc”之類的列表中選擇catid1值，然后將catid1值更改為與catid1“ abc”相同。我嘗試了多種方法，但無法解決此問題，任何人都建議這可能是可能與否。

<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>

我嘗試過的示例代碼也如下，但在我的情況下不起作用。

<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

您在第二個示例中忘記了腳本標記：

<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

是的，您可以通過javascript或Jquery做到這一點。 它在Jquery中更容易

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

查看以下jQuery方法：

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