Question

我是网络开发的新手，我正在尝试这样做：我有一个<select>，我希望所选选项的值是每当点击一个按钮时调用的方法的参数之一。

例如：

<select id="instructorSelector">
   <option value='abrown@gmail.com'>Anna Brown</option>
   <option value='jdoe@gmail.com'>Jane Doe</option>
   ...
</select>

<button onclick="sendEmail(($('#instructorSelector').val()),...,...)" type="button">Send Email</button>

这个问题在于，当我实际选择某人时，它没有被发现。我正在使用freemarker模板，但对于我应该如何做这一点的一般响应也会有所帮助。

另外，在用户实际从<select>中选择某些内容之前，如何才能使按钮无法点击（甚至可见）？

提前致谢！对不起，如果这是一个过于简单的问题。

Answer 1

你不需要传递任何东西，你需要的是一个适当的事件处理程序：

<select id="instructorSelector">
   <option value='abrown@gmail.com'>Anna Brown</option>
   <option value='jdoe@gmail.com'>Jane Doe</option>
   ...
</select>

<button id="btn" type="button">Send Email</button>

JS

$(function() {
    $('#btn').hide();

    $('#instructorSelector').on('change', function() {
        $('#btn').show();
    });

    $('#btn').on('click', function() {
        var select_value = $('#instructorSelector').val();

        // use the value here
    });
});

Answer 2

我会这样解决：

使用正确的disabled - 属性
如果框的值发生更改，则会切换此属性，具体取决于是否选择了某些内容
将选择器存储在变量中，因此您无需一直重新查询它们

<强> HTML

<select id="instructorSelector">
    <option value="">Please select</option>
    <option value="abrown@gmail.com">Anna Brown</option>
    <option value="jdoe@gmail.com">Jane Doe</option>
</select>

<button class="send_email" type="button" disabled="disabled">Send E-mail</button>

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

<强>演示

Try before buy

Answer 3

尝试使用jQuery http://api.jquery.com/change/中的.chage()使按钮可见

$('#instructorSelector').change(function () {
    $('#id-of-the-button').show();
});

在此chang功能中，您还可以捕获选项$(this).val()

的值

Answer 4

如果您使用的是JavaScript，则可以在select上使用onchange属性，这可以触发一个可以检查值并使按钮可见的方法。使用选项表示没有选择，如果是选择的选项，则隐藏按钮。

<select id="instructorSelector" onchange="something()">
   <option value='selectone'>Select one</option>
   <option value='abrown@gmail.com'>Anna Brown</option>
   <option value='jdoe@gmail.com'>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';
}
}

Answer 5

我强烈建议您阅读jQuery Event Basics

您需要了解如何使用选择器和事件来真正利用jQuery的强大功能。

我认为在阅读了有关活动之后，您会看到click和change将如何大大有利于您的网页目标。

Answer 6

最简单的方式：http://jsfiddle.net/rA4VJ/

<select id="instructorSelector">
   <option value='none' selected>Choose Someone</option>
   <option value='abrown@gmail.com'>Anna Brown</option>
   <option value='jdoe@gmail.com'>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');
    }
}

按钮单击w /选择的<select>值作为参数</select>

6 个答案: