堆栈内存溢出
  简体   繁体   English

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

[英]How to pass two parameters in javascript function onChange

 原文  2016-02-27 07:11:19  2   5    javascript/ jquery/ html

问题描述

I have written a html code for two dropdown boxes. 我已经为两个下拉框写了一个html代码。 I want to pass these two values as a parameters to a javascript function when we change the second dropdown ( onchange ). 当我们更改第二个下拉列表（ onchange ）时，我想将这两个值作为参数传递给javascript函数。

Here is my code: 这是我的代码： 

 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(); } } 
 <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>

5 个解决方案

解决方案1
 1  2016-02-27 07:20:41

Giving an id for the first dropdown and get the first dropdown value by that id. 为第一个下拉列表指定一个ID，并通过该ID获取第一个下拉列表值。 here i give an id " categoryName " for the first dropdown. 在这里，我为第一个下拉列表指定一个ID“ categoryName ”。 

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

Getting the first dropdown value by id as a parameter in onchange method. 通过id获取第一个下拉值作为onchange方法中的参数。 

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

解决方案2
 1 已采纳  2016-02-27 07:27:29

Its complicated to passing parameter and receiving them in function. 在函数中传递参数并接收它们很复杂。 A better option is to write one function and fetch these values using respective id or selector. 更好的选择是编写一个函数并使用相应的id或选择器获取这些值。

Sample Code 样例代码 

 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>

解决方案3
 0  2016-02-27 07:20:28

Check this out: 看一下这个： 

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

JSFiddle 的jsfiddle

解决方案4
 0  2016-02-27 07:22:09

Change the HTML of your second select statement to this: 将第二个select语句的HTML更改为此： 

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

First, in order to pass two values, you need to actually pass the two values into your function. 首先，为了传递两个值，您实际上需要将两个值传递到函数中。 In the example you provided you had only passed the value of the 2nd select element. 在您提供的示例中，您仅传递了第二select元素的值。

Second, we need to get the value of the first select element, which we only know the name of. 其次，我们需要获取第一个select元素的值，我们只知道其名称。 We can use the document.querySelector() function to get the first item that matches a given CSS selector. 我们可以使用document.querySelector()函数来获取与给定CSS选择器匹配的第一项。 In this case, our selector would be select[name=category_name] . 在这种情况下，我们的选择器将是select[name=category_name] 。 Then you get the value of that element with the .value property. 然后，使用.value属性获得该元素的值。 

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

解决方案5
 0  2016-02-27 07:58:04

Since you have mentioned jQuery , you can have a onChange handler for second dropdown and on change, fetch first select's value using name or id . 既然已经提到了jQuery ，那么您可以为第二个下拉列表和更改添加一个onChange处理函数，使用name或id来获取第一个select的值。

Also, you can use $.get() or $.ajax() instead. 另外，您可以改用$.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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 将函数参数从onchange传递给JavaScript函数 - Pass function parameters from onchange to JavaScript function 如何在select中将两个参数发送到Onchange函数 - How to send two parameters to Onchange function in select 发送javascript函数参数onChange - Send javascript function parameters onChange javascript：在 onchange 中传递数组 function - javascript: pass array in onchange function 如何在onchange函数中传递两个值？ - How do I pass two values in a onchange function? 使用onchange时如何将JavaScript函数结果传递给html？ - How to pass JavaScript function result to html when using onchange? 如何从html onchange动作将数组值传递给javascript函数？ - how to pass array values to javascript function from html onchange action? 如何将函数参数传递给 JavaScript 中的回调函数？ - How to pass function parameters to callback function in JavaScript? 在创建 onchange 的 javascript 中传递两个变量 - Pass two variables in a javascript created onchange 如何在 html select 的 onChange 上传递参数 - How to pass parameters on onChange of html select
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM