我正在尝试在twitter bootstrap中添加一个select输入字段。我打算在选择这些选项中的每一个时显示不同的字段。我尝试使用数据切换。但我只能用按钮而不是选择字段来取得成功。
<div class="control-group">
<label class="control-label">Payment Mode</label>
<div class="controls">
<select id="payment" class="input-xlarge">
<option value="" class="input-xlarge">Select your Payment mode</option>
<option value="1"> <a href="#cash">Cheque Deposit</a></option>
<option value="2">Online Transaction</option>
<option value="3">ATM Transfer</option>
<option value="4">IMPS Transfer</option>
</select>
</div>
</div>
此按钮代码可以正常工作 -
<button data-toggle="collapse" href="#cash">
Submit
</button>
提前干杯 Shahzad
答案 0 :(得分:3)
终于得到了答案! :) 只是一个脚本就可以了。 我是这样做的:
<div class="control-group">
<label class="control-label">Payment Mode</label>
<div class="controls">
<select id="payment" class="input-xlarge">
<option value="" class="input-xlarge">Select your Payment mode</option>
<option value="cash">Cash Deposit</option>
<option value="cheque">Cheque Deposit</option>
<option value="online">Online Transaction</option>
<option value="transfer">ATM Transfer</option>
</select>
</div>
<div class="iscash" >
<div class="control-group">
<input class="input-xlarge focused" id="focusedInput" type="text">
</div>
<div class="control-group">
<input class="input-xlarge focused" id="focusedInput" type="text">
</div>
<script>
$('[class^=is]').hide();
$("#payment").change(function() {
var value = $("#payment option:selected").val();
var theDiv = $(".is" + value);
theDiv.slideDown();
theDiv.siblings('[class^=is]').slideUp();
});
</script>