Question

HTML部分

<select class="input-medium">
    <option id="1" value="">Select</option>
    <option id="2" value="">Date</option>
    <option id="3" value="">ID</option>
</select>

<input type="text" class="hide"  name="daterange" id="from" value="" data-modal="calendar_modal">
<input type="text" class="hide" name="daterange" id="to" value="" data-modal="calendar_modal" >
<input type="text" class="" name="" id="txt" value="">

Jquery部分

$(document).off("click", "#1").on("click", "#1", function() {
    $("#from").hide();
    $("#to").hide();
});

$(document).off("click", "#2").on("click", "#2", function() {
    $("#from").show();
    $("#to").show();
    $("#txt").hide();
});

$(document).off("click", "#3").on("click", "#3", function() {
    $("#from").hide();
    $("#to").hide();
    $("#txt").show();                           
});

以上代码适用于Firefox和IE。在Chrome和Safari中无效。如何解决此问题，以便它可以在所有浏览器上运行。

Answer 1

<强>编辑：

查看http://jsfiddle.net/948cn/1/

HTML：

<style>
.hide {
    display:none;
}
<style>
<select id="selectBox" class="input-medium">
    <option id="1" value="">Select</option>
    <option id="2" value="date">Date</option>
    <option id="3" value="txt">ID</option>
</select>
<input type="text" class="inputs hide date" name="daterange" id="from" value="1" data-modal="calendar_modal">
<input type="text" class="inputs hide date" name="daterange" id="to" value="2" data-modal="calendar_modal">
<input type="text" class="inputs hide txt" name="3" id="txt" value="3">

JS：

$(document).on('change', '#selectBox', function () {
    $('.inputs').hide();
    $('.'+this.value).show();
});

Answer 2

<强>更新

请看这个小提琴：的 http://jsfiddle.net/948cn/1/

$(document).ready(function () { $('.input-medium').change(function () { var id = $(this).find('option:selected').attr("id"); $('#from, #to, #txt').hide(); if(id=='2'){ $('#from, #to').show(); }else if(id=='3') { $('#txt').show(); } }); });

隐藏/显示无法在Chrome / Safari中使用

2 个答案: