使用Javascript和選擇選項來影響輸入CSS

我試圖執行以下操作：當用戶從<select>中選擇<option>時，使用javascript函數更改<input>標記的CSS屬性visibility:。使用Javascript和選擇選項來影響輸入CSS

這裏是我到目前爲止的代碼：

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

來源

2014-01-20 proPhet

變化選擇name屬性ID – MaVRoSCy

對不起，現在包括 – proPhet

@MaVRoSCy在結果沒有變化 – proPhet

你有兩個問題

你的選擇有一個名稱不是一個ID，所以你沒有選擇它
使用select上的change事件調用您的函數。避免在選項上使用點擊事件，特別是如果你想要做的是檢查選擇是否改變。

。

<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/

來源

2014-01-20 14:17:31 Musa

選項不響應onClick。你必須從select

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

使用change事件並刪除上點擊

來源

2014-01-20 14:14:31 tehhehehheheehhe

我看你使用jQuery，這可能是很多simplier：

$('#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'); 
    } 
});

來源

2014-01-20 14:15:45 taxicala

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

來源

2014-01-20 14:18:35

保存自己的一些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

來源

2014-01-20 14:21:09

使用Javascript和選擇選項來影響輸入CSS

回答

相關問題