通过onchange事件将SELECT的值传递给Javascript函数？
通过onchange事件将SELECT的值传递给Javascript函数可以通过以下步骤实现：
- 在HTML中定义一个SELECT元素，并给它一个唯一的id属性，例如：<select id="mySelect" onchange="myFunction()"> <option value="value1">Value 1</option> <option value="value2">Value 2</option> <option value="value3">Value 3</option> </select>
- 在Javascript中定义一个函数，用于处理SELECT元素的值，例如：function myFunction() { var selectedValue = document.getElementById("mySelect").value; // 在这里可以对选中的值进行处理或执行其他操作 console.log(selectedValue); }
- 当用户选择不同的选项时，onchange事件将触发myFunction函数，并将SELECT的值传递给它。在myFunction函数中，可以通过document.getElementById("mySelect").value获取到SELECT的当前值，并进行相应的处理。
这种方法可以用于各种场景，例如根据用户选择的选项动态更新页面内容、触发其他函数或操作等。
腾讯云相关产品和产品介绍链接地址：
- 云函数（Serverless）：https://cloud.tencent.com/product/scf
- 云开发（CloudBase）：https://cloud.tencent.com/product/tcb
- 云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 区块链（Blockchain）：https://cloud.tencent.com/product/baas
- 视频处理（VOD）：https://cloud.tencent.com/product/vod
- 音视频通话（TRTC）：https://cloud.tencent.com/product/trtc
- 元宇宙（Metaverse）：https://cloud.tencent.com/product/metaverse
请注意，以上链接仅为腾讯云相关产品的介绍页面，具体的产品选择和使用需根据实际需求进行评估和决策。
相关·内容
我试图在我的中创建onChange函数。以下是我的代码：
const find = (event) => {
event.preventDefault();
if (event.target.value === "Users") {
setSearchUsers(true);
setSearchTeams(false);
} else if (event.target.value === "Teams") {
setSearchUsers(false);
setSearchTeam
浏览 8提问于2021-08-15得票数 4
嗨，我只是想知道当我有一个由事件触发的函数时，javascript/react是如何处理所发生的事情的。我将展示三个不同的代码段，其中两个可以工作，一个没有，看看我是否正确地理解了它们。:)
setField(e){console.log("in setfield", e)}
<select multiple className="form-control" id="sel2" name="sellist2"
onChange={() => this.setField()}>
这是不起作用的，因为它
浏览 2提问于2018-12-17得票数 1
我以这种方式在我的输入中获得一个值： <input style="width:200px; display:none;" readonly="" type="text" id="abc" placeholder="30.30" value="#{position.layers}"></input> 如果值发生更改，我如何调用JavaScript函数。 function callme() {
alert("ok");
} 如果我自己输入值，该方
浏览 40提问于2019-02-26得票数 1
回答已采纳
1回答
我是MVC3的新手。在我的视图页面中，我有一个下拉列表和一些字段数据，如下所示。
查看：-
//dropdownlist data
@Html.DropDownList("Category", new SelectList(categoriesList, selectedCategory), "Select One", new { onchange = "this.form.submit();" })
@Html.EditorFor(model => model.Name)
@Html.ValidationMessageFo
浏览 1提问于2012-07-19得票数 0
2回答
我在Codeacademy上了React.JS课程。这个问题来自React.JS第二部分。我正在学习编程模式，但我不能理解这个模式是如何工作的
代码：
Parent.js
var React = require('react');
var ReactDOM = require('react-dom');
var Child = require('./Child');
var Parent = React.createClass({
getInitialState: function () {
return { name: '
浏览 7提问于2017-06-14得票数 1
3回答
我对javascript函数有问题。它在页面加载时自行运行，即使它被设置为运行.onchange
我有一个选择，看起来如下：
<select name="make_brand" id="make_brand" class="form_tag dispB width_full">
<option value="" selected disabled>Please select</option>
<option value="1">Audi</o
浏览 6提问于2016-02-04得票数 1
回答已采纳
2回答
我用Jquery自动完成替换了以下选择框：
<select name="selectarea" onchange="findCity(this.options[this.selectedIndex].value);" id="sel" />
Jquery UI自动完成代码为：
$(document).ready(function() {
$( "#sel" ).autocomplete({
source: "xml/states.php"
});
$(
浏览 0提问于2012-05-18得票数 0
我正在以编程方式创建多个select元素，每个select元素中包含多个选项。我希望以编程的方式为每个select元素分配它自己的onchange函数，该函数将提醒我选择元素的相应id。
$(document).ready(function () {
// Headers indicate how many select elements I need.
// In this example, they are only used to initialize a unique select.id
for (var ndx = 0; ndx < headers.l
浏览 1提问于2017-05-26得票数 1
回答已采纳
看来我正面临着一个普通初学者的问题，但我还没有在代码中解决这个问题。
我想做的是:我已经创建了一个数据库，我目前正在开发一个简单的UI来更新它。所以，我用
一个由mySQL表填充的下拉菜单
一些窗体及其值相应地更改为下拉选择。
代码(简化一点)：
<html>
<body>
<form method="post">
<select class="dropdown" id="dropdown_id" onChange='fillFun(this.value)&
浏览 2提问于2018-01-09得票数 0
2回答
在使用div和标记时，我有一个排序函数。但是，当更改为select选项时，它不起作用。
<select id="sort-container" onchange="sortCards()">
<option>
<a href="javascript:sortCards('peoplecard', 'Services')">
Business
浏览 7提问于2022-05-10得票数 1
回答已采纳
我使用javascript和jsp动态创建行。当特定单元格中的值发生更改时，onchange事件将被触发，并将给出消息。当java脚本中使用onchange事件时，首先我试图直接传递id，
element1.onchange=checkInputValue(element1.id);
即使在创建单元格时也会触发onchange事件。后来我换到
element1.onchange = function(evt){ testInputElement(this.id); };
在"testInputElement“中，onchange事件被调用，函数运行良好。这有什么用？为什么我们需要在函数
浏览 1提问于2015-03-31得票数 0
回答已采纳
我需要使用javascript代码将一个html页面的值传递给另一个html javascript函数。如何传值。提前感谢
view.cshtml:
b.on('click', function () {
document.location.href = + '?Id=' + sData; // need to pass the value
});
index.cshtml:
function getId(data) { // i need to get the data here
}
浏览 3提问于2013-02-26得票数 0
我在任何地方都没有发现这个问题，所以我把它发在这里。
我有一堆选择标记，它们部分使用VBScript命名。我希望能够获得javascript中从onchange事件中调用的select标记的名称。
这是密码。
<select name="optWeeks_<%=intLineCnt%>" id = "name" onchange="changeWeek()">
<option value=""></option>
<option value=&
浏览 7提问于2013-08-02得票数 2
回答已采纳
1回答
我正在为我的自定义下拉菜单寻找JavaScript或在jquery中
<form name="menu">
<select ONCHANGE="location = this.options[this.selectedIndex].value;">
<option value="" selected="selected">Courses</option>
<option value="http://www.google.com">Cours
浏览 0提问于2014-06-27得票数 0
我有两个<select>，类别和子类别。我希望当我单击Categories中的一个选项/值时，然后从mySQL加载和更新第二个<select>。子类别值采用mySQL格式。
(1)类别选择
<select class="form-control" onchange="check()" id="category" name="category">
<option value="cafe">Café</option>
<option
浏览 0提问于2016-11-15得票数 0
在html页面中，如果使用鼠标从下拉列表( select和option html元素)中选择一项，则将触发onchange事件。但是，如果我使用Javascript来更改选择元素的selectedindex，那么onchange事件将不会被激发。
这两个动作有什么不同？
如何触发onchange事件(不显式调用selectElement.onchange() )？
浏览 1提问于2012-09-19得票数 3
回答已采纳
当在触发onChange函数的Dropdown中单击值时，React表单工作得很好。但是，我试图在页面加载时预先填充DropDown值(通过在dropdown之间建立依赖关系)，这就是我遇到问题的地方，如果不手动修改，onChange函数不会选择值。
我尝试使用下面的代码片段手动调用它，但是onChange没有被触发。
var element = document.getElementById("non_prod_env_id_textbox");
var event = new Event('change');
浏览 58提问于2021-07-31得票数 0
3回答
两者有什么区别？
onChange={({ target: { value } }) => setInsertedTitle(value)}
和
onChange={setInsertedTitle}
什么时候应该使用其中之一？
浏览 4提问于2021-07-25得票数 2
回答已采纳
2回答
因此，我列出了一些类别，每个类别都有一个适当的id值，其思想是在更改类别以向服务器发送ajax请求之后，但在此之前，我必须获得所选类别的id，问题是每次尝试获取值后，我都会得到这个错误消息。
app.js:1 Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
at C.fn.init.val (app.js:1)
at sortByCategory (news:174)
at HTMLSelectElement.onchange (news:215)
问题是它返回整个窗口对象，我不知道如何只获
浏览 1提问于2018-09-24得票数 0
回答已采纳
2回答
我有两个不同的下降。我想使用JavaScript来更改下拉选择的网址。当我传递一个值时，它几乎可以工作，但是我仍然在URL窗口中得到一个“未定义的”。守则如下：
JavaScript:
function callDDfunction(val) {
alert("The new value is: " + val);
if (this.selectedIndex!==0) {
window.location.href = this.value;
}
};
HTML:
<select on
浏览 2提问于2014-10-13得票数 1
以传统的方式添加事件侦听器：
function getComboA(sel) {
var value = sel.options[sel.selectedIndex].value;
}
<select id="comboA" onchange="getComboA(this)">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option va
浏览 2提问于2012-08-19得票数 66
回答已采纳
我有一个隐藏的select元素，带有一个对javascript函数的onchange调用。
当用户单击我页面上的按钮时，我运行以下代码并显示我的select表单：
$("#moreDetails2").show();
$('#moreDetails2').trigger("create");
但是，在显示之后，它将不会执行其JavaScript函数。我已经测试过它不是隐藏的，它是有效的。
<div id = \"moreDetails2\">
<select onch
浏览 3提问于2013-02-08得票数 0
回答已采纳
2回答
我有一个场景，我必须根据下拉列表的选择执行一些操作。
对于基本的参考，你可以使用国家，州，城市的例子。
我可以填充国家/地区列表，此时我已将其他两个下拉列表设置为禁用。
填充国家后，我想选择the state.it is getting populated。
两个问题
1)如何在国家ddl恢复到初始状态时保持其状态。2)如何通过我的控制器启用下拉列表。
myview代码
Country
<p>
<label>
State<
浏览 1提问于2010-10-25得票数 0
我该怎么看待这个：
<select onchange='disable(this)'> //options here </select>
把它变成createElement和eventListener？我不知道如何添加onchange=“禁用(此)”。
到目前为止，我已经：
var optionList = ["default", "yes", "no"];
var td = document.createElement("td");
selectList = document.crea
浏览 2提问于2017-04-01得票数 0
回答已采纳
在我的React应用程序(版本15.4.2)中，我用JavaScript更新文本输入字段的值--但是，我有一个与输入字段相关联的onChange事件侦听器，而更改输入字段的值并不会触发处理程序(当然，输入字段中的老式类型会触发处理程序)，尽管字段的内容是正确更新的。
constructor(props) {
super(props);
this.onChange = this.onChange.bind(this);
}
onChange(event){
let attribute = event.target.name;
let updatedGroup =
浏览 1提问于2017-02-17得票数 7
回答已采纳
function updateText(){
alert(fontsize.options[fontsize.selectedIndex].value);
}
var fontsize = document.getElementById("fontsize");
fontsize.addEventListener('onChange','updateText',false);
这是我的JavaScript来处理我的网页字体大小的选择。但是，当我在下拉列表中选择不同的值时，没有任何反应。
控制台日志中也没有错误。
所以，我的问题是：
浏览 1提问于2014-03-23得票数 0
1回答
我有一个select输入，其中显示来自ViewBag的数据，其中包含一个对象列表“Contact”：
<select id="choix_contact" onchange="javascript:RemplirTextbox();">
<option>Choisir un contact</option>
@if (ViewBag.ListeContacts != null)
{
foreach (var C
浏览 2提问于2013-08-01得票数 0
回答已采纳
在JavaScript事件处理程序中，event和event.target有什么区别？什么时候使用它们？
这里有两个例子：(小提琴：)
HTML:
<select id="test1">
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="test2" onchange="handleSelect(this)"&g
浏览 1提问于2020-11-03得票数 2
回答已采纳
在我的function示例应用程序中，我通过引用将函数"manipulateUsername“作为事件侦听器传递给另一个较小的组件。
App.js：
import React, { Component } from 'react';
import './App.css';
import UserInput from './components/UserInput';
import UserOutput from './components/UserOutput';
class App extends Component
浏览 0提问于2019-03-02得票数 0
我是学校一节考试的最后一名学生。
select应该有一个提交新动物的onChange事件
本质上，我似乎无法将handleSubmit函数传递到子函数中，以响应更改.这是规范的其余部分。
it('select should have an onChange event that submits the new animal', () => {
expect(animalSelect.props('select').onChange).to.be.function;
// choosing a random animal
let anim
浏览 3提问于2017-12-02得票数 1
回答已采纳
我正在尝试将函数传递给组件
html
<v-select :options="[
{label:'ll', value:'vv'},
{label:'ll', value:'vv'},
{label:'ll', value:'vv'},
{label:'ll', value:'vv'},
]" :s_onchan
浏览 0提问于2018-08-27得票数 0
我是使用异步组件的反应-选择内嵌编辑在ag-网格.(onChange)中有一个可用的事件，当我们进行更改时，它捕获值和操作。但是，当我按enter按钮从下拉列表中选择一个项时，不会调用onChange方法。我之所以注意到这一点，是因为在我按下下拉菜单上的enter按钮之后调用了onBlur方法。
下面是异步组件的示例-
<Async
className = "async-multi-select"
classNamePrefix="react-select"
isMulti
defaultValue={[]}
id={"aync-react-sel
浏览 6提问于2022-04-27得票数 0
我在选择框上使用dojo.connect来处理功能。我想要获取下拉值。
这是HTML
<select class="drop-down">
<option value="0">option1</option>
<option value="1">option2</option>
</select>
下面是用dojo编写的Javascript
var selectBox = dojo.query('.drop-down');
dojo.connect(s
浏览 3提问于2012-12-17得票数 0
我有一个接受一个值的javascript函数。从下拉列表中开始获取THe值。我无法将值传递给函数，我想知道我做错了什么。任何帮助都将不胜感激。
JS函数
Puma.selectEvent = function(year) {
var year = year;
select the event
}
下拉列表更改时的事件。sYear、sMonth和sSeason是下拉列表名称。“彪马”并不重要。
onChange=Puma.selectEvent(sYear.value);
浏览 1提问于2012-07-26得票数 0
因此，我试图读取触发事件的东西的值，在我的例子中，它是Select，但是当我更改标记时，它给了我一个错误，它说了TypeError: Cannot read property 'target' of undefined。我认为它是指未定义的事件或目标，我的代码如下所示
function RandomScreen() {
function handleChange(event) {
ChangeSomeOtherState(event.target.value)
}
return (
<select onChange={() => han
浏览 4提问于2021-04-18得票数 1
回答已采纳
我有下面的html代码，并试图通过更改javascript函数向全局数组添加新值。我正在尝试像下面的way.But那样做，它给javascript errors.Please建议任何人如何做到这一点。
<html>
<head>
<script>
var list=[];
function getList(value){
list=list(value);
}
</script>
</head>
<body>
<tr>
<td>
<select name="test"
浏览 1提问于2011-04-11得票数 2
回答已采纳
我正在尝试在select元素上使用javascript创建onchange事件。但是它不工作，有任何提示我做错了什么吗？
脚本..
<script type="text/javascript">
function check() {
alert("Hi");
}
</script>
HTML..
<body>
<select name="selTitle" id="titles" onchange="check();">
<option value=&#
浏览 0提问于2011-10-29得票数 1
回答已采纳
我有一个这样的3个列表的表单，我需要每次一个列表的变化把其他的在cero 0，我需要这在原型或纯Javascript
<select id="1" onchange="resetall()">
<option value="0">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select i
浏览 0提问于2011-09-05得票数 0
回答已采纳
我有以下代码，用于为类名为'State‘的所有元素创建onchange事件处理程序。唯一的问题是，我希望将元素传递给'StateChange‘函数。如何更新此JS以将' this‘传递给StateChange函数？谢谢!
var c = document.getElementsByClassName('State');
for (i = 0; i < c.length; i++) c[i].onchange = createEventHandler( StateChange, c[i] );
编辑:我忘了提供createEventHandler函数
浏览 6提问于2011-12-02得票数 3
回答已采纳
4回答
JS函数缺少参数，还能工作吗？
、、、、
我一直在挣扎于何时接收/传递参数到JavaScript函数的想法，阅读这篇关于的文章帮助我明确了我的问题。下面是本文的代码：
<input type="text" placeholder="Type something here, then click outside of the field." size="50">
<p id="log"></p>
let input = document.querySelector('input');
let log = document.
浏览 11提问于2020-03-04得票数 2
我需要向AntD选择组件的onSelect方法传递一个额外的参数，该参数不能在options对象数组中列出。我试图通过映射一个数组在UI上呈现几个Select组件，并且需要将呈现的元素的索引传递给onSelect方法。根据文档，它只支持从onSelect方法读取value和options。有什么解决方案吗？ 当前代码： list.map(input, index) -> {
return <Select
.....
onChange={handleOnChange}
/>
}
handelOnChange
浏览 201提问于2021-03-29得票数 2
回答已采纳
<script type="text/javascript">
function ddl(id) {
// var id = document.getElementById('<%=DDLquestionType.ClientID%>').value;
if (id == "Open") {
AmericanAnswer.style.display = 'none'
浏览 0提问于2016-08-26得票数 1
回答已采纳
我有一个名为Select的组件，它有options、value和onChange道具。options是一个具有label和value属性的对象数组。这是我的Select.tsx代码
import * as React from "react";
import type { ChangeEventHandler, ReactElement } from "react";
export interface OptionType {
value: string | number | null;
label: string;
}
export const S
浏览 0提问于2021-08-23得票数 2
回答已采纳
1回答
我的网页加载了以下内容：
<script>
function updateStateSelectColor(){
var elm = document.getElementById("state");
elm.style.color="black";
}
</script>
<select id="state" onchange="updateStateSelectColor()">
<option value="AL">Alabama<
浏览 32提问于2016-12-09得票数 1
2回答
我有以下代码
<form name="form" id="form">
<select name="name" onChange=" <?php $do=&something('val')?>">
<option value="val1">val2</option>
<option>val1</option>
</select>
</form>
我正在尝试使用
浏览 0提问于2013-04-16得票数 0
回答已采纳
在视图中，我有代码
<tr>
<td><%= form.label :category_id %></td>
<td><%= form.select :category_id, options_from_collection_for_select(Category.all, 'id', 'name'), :class => 'form-control',:onchange => 'addCategory(category_id)'%>&l
浏览 0提问于2017-10-22得票数 0
我有一个简单的反应组件：
state = {
value: '',
};
render() {
return <select onChange={this.handleChange} value={this.state.value}>
<option value="">--</option>
<option value="1">One</option>
</select>;
}
handleChange = (e) => {
this
浏览 0提问于2018-12-13得票数 4
回答已采纳
我正试图在C#中完成这一切，但我可能不得不求助于JavaScript。
我有一个下拉列表，我想做一个换一次的活动。我不能将下拉列表绑定到模型，因为绑定阻止了onchange的使用。我需要使用onchange事件来修改屏幕上的某些内容，具体取决于所选内容。也许一些代码会有帮助。
<select id="BrandSelected" @onchange="BrandIsChanged">
<option value="NewBrand">--Create New Brand--</option>
@foreach
浏览 4提问于2022-09-19得票数 0
回答已采纳
当我通过Javascript更改值时，jquery中的.change调用不起作用。
例如：
$(document).ready(function () {
$(function () {
$("select#product").change(function () {
if (document.all("fatcaSearchDO.bankId").disabled.value = true) {
fnFieldEnableClass(document.all("f
浏览 1提问于2013-04-18得票数 1
我正在处理onChange事件，它将调用javascript方法。
但是，当我更改为某个值并单击reset时，它的重置为原始值，但是onChange javascript事件并没有调用。
<select onChange="method1()">
<option>....
</select>
<input type="reset" value="reset" />
单击“重置”按钮后，该值将设置为旧值，但onChange事件无法工作.
浏览 3提问于2010-11-30得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
