顯示基於選擇值的特定輸入框

我是JavaScript新手，但我試圖根據選擇框選項來顯示哪個輸入框顯示。我想知道是否有人可以看看我的一小部分代碼，並首先告訴我爲什麼它不起作用，其次告訴我是否有更好的方法來實現這一點。顯示基於選擇值的特定輸入框

function applyselect() 
{ 
    if (!$("#apply email:selected").length) { 
    $("website").addClass("hidden");   
    } 
    else { 
    $("email").addClass("hidden");   
    } 
} 

$(function() { 
    applyselect(); 
});

P.S我挺想保持它包裹在一個函數。

來源

2013-06-22 James Willson

您需要使用選擇 –

您需要的change事件選擇綁定。

$(document).ready(function() { 
    $("#apply").change(function() { 
     var selected = $(this).find(':selected').val(), 
      elem = $("#"+selected); 
     $("input").addClass('hidden'); 
     elem.removeClass('hidden'); 
    }); 
    $("#apply").trigger('change'); 
});

爲什麼$("#apply").trigger('change');？

因爲它需要執行該功能後的DOM已準備就緒。否則，您可以刪除該行並將class="hidden"添加到您的<input id="website">（默認情況下，頁面加載時不是所選的選項）。

這是一個working fiddle的代碼。

來源

2013-06-22 16:17:10

您忘記#以匹配元素的ID。

$("website").addClass("hidden"); 
    ^---- Here goes a #

同樣爲您的其他呼叫$("email").addClass("hidden");

來源

2013-06-22 16:11:24 Nelson

的onchange事件，我把這個在這裏，但仍無法正常工作：http://jsfiddle.net/spadez/MJGmg/3/ –

Demo

您應該使用on選擇

$(document).ready(function() { 
    $(this).on('change', '#apply',function() { 
     var selected = $(this).find(':selected').val(), 
      elem = $("#"+selected); 
     $("input").addClass('hidden'); 
     elem.removeClass('hidden'); 
    }); 
    $("#apply").trigger('change'); 
});

來源

2013-06-22 16:22:12

感謝您竊取我的代碼。無論如何，如果使用'on'，將代碼包裝在'$（document）.ready（）'中是沒有必要的，在這種情況下'on'根本就不是必需的。 –

@LightStyle：你的代碼已經更好了，我試圖讓它變得最好。 –

@LightStyle：'ready function'將有助於添加處理程序。 –

顯示基於選擇值的特定輸入框

回答

相關問題