javascript 单击带有 <select> 的选定值作为参数的按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17797603/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Button on click w/ selected value of <select> as parameter
提问by CustardBun
I am new to web development and I'm trying to do this:
I have a <select>and I want the value of the selected option to be one of the parameters of a method that is called whenever a button is clicked.
我是 Web 开发的新手，我正在尝试这样做：我有一个<select>并且我希望所选选项的值是单击按钮时调用的方法的参数之一。
So for example:
例如：
<select id="instructorSelector">
<option value='[email protected]'>Anna Brown</option>
<option value='[email protected]'>Jane Doe</option>
...
</select>
<button onclick="sendEmail(($('#instructorSelector').val()),...,...)" type="button">Send Email</button>
The problem with this is that it doesn't seen to detect when I've actually selected someone. I'm using freemarker templates but a general response as to how I should do this would be helpful too.
这样做的问题是当我真正选择了某人时，它没有检测到。我正在使用 freemarker 模板，但关于我应该如何做的一般性回应也会有帮助。
Also, how could I make it so the button is not clickable (or even visible) until the user actually selects something from the <select>?
另外，在用户实际从<select>?
Thanks in advance! Sorry if this is an overly simple question.
提前致谢！对不起，如果这是一个过于简单的问题。
回答by adeneo
You don't need to pass anything, what you need is a proper event handler:
你不需要传递任何东西，你需要的是一个合适的事件处理程序：
<select id="instructorSelector">
<option value='[email protected]'>Anna Brown</option>
<option value='[email protected]'>Jane Doe</option>
...
</select>
<button id="btn" type="button">Send Email</button>
JS
JS
$(function() {
$('#btn').hide();
$('#instructorSelector').on('change', function() {
$('#btn').show();
});
$('#btn').on('click', function() {
var select_value = $('#instructorSelector').val();
// use the value here
});
});
回答by insertusernamehere
I would solve it like this:
我会这样解决：
- disable the button in the beginning using the proper
disabled-attribute - toggle this attribute if the value of the box changes, depending on something is selected or not
- store the selectors in variables, so you don't need to re-query them all the time
- 使用正确的
disabled属性在开始时禁用按钮 - 如果框的值发生变化，则切换此属性，具体取决于是否选择了某些内容
- 将选择器存储在变量中，因此您无需一直重新查询它们
HTML
HTML
<select id="instructorSelector">
<option value="">Please select</option>
<option value="[email protected]">Anna Brown</option>
<option value="[email protected]">Jane Doe</option>
</select>
<button class="send_email" type="button" disabled="disabled">Send E-mail</button>
JavaScript
JavaScript
// example of a selector using a class name
var button = $('button.send_email');
// example of using a selector using the id of an element
var selector = $('#instructorSelector');
selector.change(function () {
if ('' == selector.val()) {
button.attr('disabled', 'disabled');
} else {
button.removeAttr('disabled');
}
});
button.click(function(event) {
sendEmail(selector.val());
event.preventDefault();
});
Demo
演示
回答by Muhammad Umer
Simplest Way: http://jsfiddle.net/rA4VJ/
最简单的方法：http: //jsfiddle.net/rA4VJ/
<select id="instructorSelector">
<option value='none' selected>Choose Someone</option>
<option value='[email protected]'>Anna Brown</option>
<option value='[email protected]'>Jane Doe</option>
</select>
<button id="btn" type="button">Send Email</button>
var btn = document.getElementById("btn");
var elm = document.getElementById("instructorSelector");
elm.onchange = function (e) {
if (elm.value != 'none') {
console.log(elm.value);
btn.removeAttribute('disabled');
} else {
btn.setAttribute('disabled', 'disabled');
}
}
回答by paka
Try to use .chage()from jQuery http://api.jquery.com/change/to make button visible
尝试使用.chage()jQuery http://api.jquery.com/change/使按钮可见
$('#instructorSelector').change(function () {
$('#id-of-the-button').show();
});
In this chang function you can also capture values of option $(this).val()
在此更改功能中，您还可以捕获选项的值 $(this).val()
回答by ia.solano
If you are using JavaScript, you can have the property onchange on the select, that can trigger a method that could check the value and make visible the the button. Use an option to indicate that there is no selection, and if that is the one selected, hide the button.
如果您使用的是 JavaScript，则可以在选择上设置 onchange 属性，该属性可以触发一个方法，该方法可以检查值并使按钮可见。使用一个选项表示没有选择，如果选择了那个，则隐藏按钮。
<select id="instructorSelector" onchange="something()">
<option value='selectone'>Select one</option>
<option value='[email protected]'>Anna Brown</option>
<option value='[email protected]'>Jane Doe</option>
...
</select>
<button id="button" style="display:none;" onclick="sendEmail(($('instructorSelector').val()),...,...)" type="button">Send Email</button>
function something(){
if ( $('#instructorSelector').val()!='selectone' ) {
document.getElementById("button").style.display = 'block';
}
else{
document.getElementById("button").style.display = 'none';
}
}
回答by Karl Anderson
I highly recommend that you read jQuery Event Basics
我强烈建议您阅读jQuery Event Basics
You will need to understand how you can use selectors along with events to truly leverage the power of jQuery.
您需要了解如何使用选择器和事件来真正利用 jQuery 的强大功能。
I think after reading about events you will see how clickand changewill greatly benefits the goals you have for your page.
我认为，阅读有关的活动，你会看到后click，并change会大大有利于你有你的页面的目标。
