Question

我为两个下拉框编写了一个html代码。我想在更改第二个下拉列表（javascript）时将这两个值作为参数传递给onchange函数。

这是我的代码：

＆＃13;

function CatName(str1, str2) {

  if (str == "") {
    document.getElementById("album_name").innerHTML = "";
    return;
  } else {
    if (window.XMLHttpRequest) {
      // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp = new XMLHttpRequest();
    } else {
      // code for IE6, IE5
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("album_name").innerHTML = xmlhttp.responseText;
      }
    };
    xmlhttp.open("GET", "update.php?q=" + str1 + "&q1=" + str2, true);
    xmlhttp.send();
  }
}

＆＃13;

<div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
  <div class="form-group">
    <select class="form-control" name="category_name">
      <option value="" selected>Please Select</option>
      <option value="Birds">Birds</option>
      <option value="Notinlist">Category Not in list</option>
    </select>
  </div>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
  <div class="form-group">
    <select class="form-control" name="album_name" onchange="CatName(this.value)">
      <option value="" selected>Please Select</option>
      <option value="Dove">Dove</option>
      <option value="Parrot">Parrot</option>
      <option value="Notinlist">Category Not in list</option>
    </select>
  </div>
</div>

＆＃13;

Answer 1

为第一个下拉列表提供一个id并按该ID获取第一个下拉值。在这里我给了一个id＆＃34; categoryName＆＃34;第一次下拉。

<div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
<div class="form-group">
         <select class="form-control" name="category_name" id="categoryName" > 
            <option value="" selected>Please Select</option>
            <option value="Birds">Birds</option>
            <option value="Notinlist">Category Not in list</option>
         </select>
</div>
</div>

在onchange方法中将id作为参数获取第一个下拉值。

<div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
<div class="form-group"  >
         <select class="form-control" name="album_name" onchange="CatName(this.value,document.getElementById('categoryName').value)">
            <option value="" selected>Please Select</option>
            <option value="Dove">Dove</option>
                <option value="Parrot">Parrot</option>
            <option value="Notinlist">Category Not in list</option>
         </select>
</div>
</div>

Answer 2

传递参数并在函数中接收它们很复杂。更好的选择是编写一个函数并使用相应的id或selector获取这些值。

示例代码

function getvalue() {
  var fval = document.getElementById('category_name').value;
  alert(fval);
  var sval = document.getElementById('album_name').value;
  alert(sval);
}

<body>
  <div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
    <div class="form-group">
      <select class="form-control" id="category_name">
        <option value="" selected>Please Select</option>
        <option value="Birds">Birds</option>
        <option value="Notinlist">Category Not in list</option>
      </select>
    </div>
  </div>
  <div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
    <div class="form-group">
      <select class="form-control" id="album_name" onchange="getvalue();">
        <option value="" selected>Please Select</option>
        <option value="Dove">Dove</option>
        <option value="Parrot">Parrot</option>
        <option value="Notinlist">Category Not in list</option>
      </select>
    </div>
  </div>
</body>

Answer 3

检查一下：

$('.form-group select').change(function(){
    var val = $(this).val();
 function CatName(val) {
    alert(val);
}
CatName(val);
});

<强> JSFiddle

Answer 4

将第二个选择语句的HTML更改为：

<select class="form-control" name="album_name" onchange="CatName(this.value, document.querySelector('select[name=category_name]').value)">

首先，为了传递两个值，您需要将两个值实际传递给您的函数。在您提供的示例中，您只传递了第二个select元素的值。

其次，我们需要获取第一个select元素的值，我们只知道它的名称。我们可以使用document.querySelector()函数来获取与给定CSS选择器匹配的第一个项目。在这种情况下，我们的选择器将是select[name=category_name]。然后使用.value属性获取该元素的值。

document.querySelector('select[name=category_name]').value

Answer 5

由于您已提及jQuery，因此您可以使用onChange处理程序进行第二次下拉列表和更改，使用name或id获取第一个选择值。

此外，您可以改为使用$.get()或$.ajax()。

var url = "update.php?q=" + str1 + "&q1=" + str2;
$.get(url, function(response){ // sucess handler })
  .error(function(exception){ // process exception });

$("[name='album_name']").on("change", function CatName() {
  var category = $("[name='category_name']").val();
  var album = $(this).val();
 
  $("#result").html("<pre>" + JSON.stringify({category:category, album:album},0,4));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
  <div class="form-group">
    <select class="form-control" name="category_name">
      <option value="" selected>Please Select</option>
      <option value="Birds">Birds</option>
      <option value="Notinlist">Category Not in list</option>
    </select>
  </div>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
  <div class="form-group">
    <select class="form-control" name="album_name">
      <option value="" selected>Please Select</option>
      <option value="Dove">Dove</option>
      <option value="Parrot">Parrot</option>
      <option value="Notinlist">Category Not in list</option>
    </select>
  </div>
</div>

<p id="result"></p>

如何在javascript函数onChange中传递两个参数

5 个答案:

示例代码