堆棧內存溢出
  簡體   English   中英

如何在javascript函數onChange中傳遞兩個參數

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

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

問題描述

我已經為兩個下拉框寫了一個html代碼。 當我們更改第二個下拉列表（ onchange ）時，我想將這兩個值作為參數傳遞給javascript函數。

這是我的代碼： 

 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

為第一個下拉列表指定一個ID，並通過該ID獲取第一個下拉列表值。 在這里，我為第一個下拉列表指定一個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>

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

在函數中傳遞參數並接收它們很復雜。 更好的選擇是編寫一個函數並使用相應的id或選擇器獲取這些值。

樣例代碼 

 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

看一下這個： 

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

的jsfiddle

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

將第二個select語句的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

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

既然已經提到了jQuery ，那么您可以為第二個下拉列表和更改添加一個onChange處理函數，使用name或id來獲取第一個select的值。

另外，您可以改用$.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函數 如何在select中將兩個參數發送到Onchange函數 發送javascript函數參數onChange javascript：在 onchange 中傳遞數組 function 如何在onchange函數中傳遞兩個值？ 使用onchange時如何將JavaScript函數結果傳遞給html？ 如何從html onchange動作將數組值傳遞給javascript函數？ 如何將函數參數傳遞給 JavaScript 中的回調函數？ 在創建 onchange 的 javascript 中傳遞兩個變量 如何在 html select 的 onChange 上傳遞參數
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM