2012-11-21 114 views
1

我想使用的this code略加修改,以显示/隐藏this page场返回时间根据旅行类型:显示/隐藏字段基于期权的价值选择框

单程:返回时间被隐藏

往返:返回时间显示为

这里是选择框html。代码由wordpress上的cforms自动生成。

<select name="TripType" id="TripType" class="cformselect" > 
       <option value="One Way">One Way</option> 
       <option value="Round Trip">Round Trip</option> 
      </select> 

这里是我试图隐藏表单元素:

<li id="li--8" class=""><label id="label--8" for="DepartLeg2-Time"><span>Return Time</span></label><select name="DepartLeg2-Time" id="DepartLeg2-Time" class="cformselect" > 
        <option value="12:00am">12:00am</option> 
        <option value="12:30am">12:30am</option> 
        <option value="1:00am">1:00am</option> 
        <option value="1:30am">1:30am</option> 
        <option value="2:00am">2:00am</option> 
        <option value="2:30am">2:30am</option> 
        <option value="3:00am">3:00am</option> 
        <option value="3:30am">3:30am</option> 
        <option value="4:00am">4:00am</option> 
        <option value="4:30am">4:30am</option> 
        <option value="5:00am">5:00am</option> 
        <option value="5:30am">5:30am</option> 
        <option value="6:00am">6:00am</option> 
        <option value="6:30am">6:30am</option> 
        <option value="7:00am">7:00am</option> 
        <option value="7:30am">7:30am</option> 
        <option value="8:00am">8:00am</option> 
        <option value="8:30am">8:30am</option> 
        <option value="9:00am">9:00am</option> 
        <option value="9:30am">9:30am</option> 
        <option value="10:00am">10:00am</option> 
        <option value="10:30am">10:30am</option> 
        <option value="11:00am">11:00am</option> 
        <option value="11:30am">11:30am</option> 
        <option value="12:00pm">12:00pm</option> 
        <option value="12:30pm">12:30pm</option> 
        <option value="1:00pm">1:00pm</option> 
        <option value="1:30pm">1:30pm</option> 
        <option value="2:00pm">2:00pm</option> 
        <option value="2:30pm">2:30pm</option> 
        <option value="3:00pm">3:00pm</option> 
        <option value="3:30pm">3:30pm</option> 
        <option value="4:00pm">4:00pm</option> 
        <option value="4:30pm">4:30pm</option> 
        <option value="5:00pm">5:00pm</option> 
        <option value="5:30pm">5:30pm</option> 
        <option value="6:00pm">6:00pm</option> 
        <option value="6:30pm">6:30pm</option> 
        <option value="7:00pm">7:00pm</option> 
        <option value="7:30pm">7:30pm</option> 
        <option value="8:00pm">8:00pm</option> 
        <option value="8:30pm">8:30pm</option> 
        <option value="9:00pm">9:00pm</option> 
        <option value="9:30pm">9:30pm</option> 
        <option value="10:00pm">10:00pm</option> 
        <option value="10:30pm">10:30pm</option> 
        <option value="11:00pm">11:00pm</option> 
        <option value="11:30pm">11:30pm</option> 
       </select></li> 

这里是我使用的JavaScript:

$("#TripType").change(function() { 
    $("#li--8")[$(this).val() == "Round Trip" ? 'show' : 'hide']("fast"); 
}).change(); 

我的代码上这儿工作JSFiddle:http://jsfiddle.net/MS4Ck/。但是,它不在网站上工作。我的控制台不给我任何错误,除了一些来自某些日志代码的引用错误,我把它放在那里以确保JavaScript被调用(它是)。有任何想法吗?非常感谢!

+0

如果日志代码是在JavaScript中,可以防止你的代码的其余部分的执行。我不知道还有什么会导致代码在您的网站上失败,但不是在jsfiddle上... –

+0

所以,你只是想隐藏表单? –

+0

尝试使用浏览器中的一些调试工具调试过程像萤火虫..请参阅选择索引更改事件会发生什么... – Scorpio

回答

1

只是一个猜测,但要确保此功能被包裹在一个docReady的功能,例如:

$(document).ready(function() { 
    $("#TripType").change(function() { 
     $("#li--8")[$(this).val() == "Round Trip" ? 'show' : 'hide']("fast"); 
    }).change(); 
}); 
+0

这样做!非常感谢Sdedelbrock!你摇滚! – user1843070

+0

另外,你能告诉我除了li-8之外如何添加另一个元素吗?就像我还想添加li - 7一样? – user1843070

+0

当然,这里你去:[http://jsfiddle.net/MS4Ck/3/](http://jsfiddle.net/MS4Ck/3/) – Sdedelbrock

相关问题