Question

我正在尝试实现以下内容：当用户从visibility:中选择<input>时，使用javascript函数更改<option>代码的CSS属性<select>。

到目前为止，这是我的代码：

main.js：

function change_css(){
    if( $('#billing_method').val() == "CLICK THIS TO CHANGE VISIBILITY" ){
        $('#the_input').css({ 'visibility': 'visible' });
    }else{
        $('#the_input').css({ 'visibility': 'hidden' });
    }
}

page.html中：

<select name="billing_method">
    <option onClick='change_css()'>-- SELECT AN OPTION --></option>
    <option onClick='change_css()'>CLICK THIS TO CHANGE VISIBILITY</option>
</select>

<input type="text" id="the_input" value="" placeholder="I AM THE INPUT" />

styles.css的：

#the_input{
    visibility: hidden;
}

请参阅jsfiddle

Answer 1

选项不响应onClick。您必须使用change

中的select事件

$('select').change(function(){
    if( $(this).val() == "CLICK THIS TO CHANGE VISIBILITY" ){
        $('#the_input').css({ 'visibility': 'visible' });
    }else{
        $('#the_input').css({ 'visibility': 'hidden' });
    }
});

并删除点击

Answer 2

你有两个问题

您的选择名称不是ID，因此您无法选择
使用select上的更改事件来调用您的函数。避免在选项上使用点击事件，特别是如果您要做的是检查选择是否更改。

<select onchange='change_css()' name="billing_method" id="billing_method">
    <option>-- SELECT AN OPTION --></option>
    <optio>CLICK THIS TO CHANGE VISIBILITY</option>
</select>

http://jsfiddle.net/rnDwr/5/

Answer 3

保存一些jQuery并用纯JavaScript编写：

var select = document.querySelector('select[name=billing_method]');
var input = document.querySelector('#the_input');
var changeCSS = function () {
    var val = this.options[this.selectedIndex].value;
    if (val.toLowerCase() === 'click this to change visibility') {
        input.style.visibility = 'visible';
    } else {
        input.style.visibility = 'hidden';
    }
};
select.onchange = changeCSS;

http://jsfiddle.net/toddmotto/UNL4k

Answer 4

我看到你正在使用jQuery，这可能会简单得多：

$('#billing_method').change(function() {
    if ($(this).val('CLICK THIS TO CHANGE VISIBILITY')) {
        //first option:
        $('#the_input').show();

        //second option:
        $('#the_input').css('visibility', 'visible'); 
    } else {
        //first option:
        $('#the_input').hide();

        //second option:
        $('#the_input').css('visibility', 'hidden'); 
    }
});

Answer 5

Fiddle Demo

$(document).ready(function () {
    $('select[name="billing_method"]').change(function () {
        var that = $(this);
        $('#the_input').css('visibility', function () {
            return (that.find('option:selected').text() === "CLICK THIS TO CHANGE VISIBILITY") ? 'visible' : 'hidden';
        });
    });
});

<小时/> 参考

.find()

Attribute Equals Selector

使用Javascript和选项选择影响输入CSS

5 个答案: