將值綁定到下拉列表項

Question

我的網頁中有這樣的代碼片段：

timeout = setTimeout(function() {highlight(transfer);}, 1500);

我需要用戶可以使用下拉菜單或復選框將1500的值更改為其他值。 誰能幫助我呢？

Answer 1

嘗試這個

var timeout; //populate as required from dropdown/checkboxes
timeout = setTimeout(function() {highlight(transfer);}, timeout);

Answer 2

簡單選擇（非自定義下拉列表）的示例

的HTML：

<select id="selectInterval" onChange="setNewValue.call(this,event)">
    <option value="">Select Interval</option>
    <option value="1500">1,5 seconds</option>
    <option value="2000">2 seconds</option>
    <option value="2500">2,5 seconds</option>
</select>

JS：

var timeout;
setNewValue= function(e){
    var _v = this.value;
    if(typeof _v == "undefined" || _v == "") return;
    timeout = setTimeout(function() {highlight(transfer);}, _v);
}

一個有效的例子

---

另一個在jquery / css中具有簡單自定義Dropdown的示例：

的HTML：

<div class="dropdown">
    <span class="evalued" rel="">Select Interval</span>
    <ul class="options">
        <li class="item" style="display:none"><a class="selected" rel="">Select Interval</a></li>
        <li class="item"><a rel="1500">1,5 seconds</a></li>
        <li class="item"><a rel="2000">2,0 seconds</a></li>
        <li class="item"><a rel="2500">2,5 seconds</a></li>
    </ul>
</div>

CSS：

.dropdown{
    position: relative;
    width:180px;
    height:28px;
    line-height:28px;
    font-size:14px;
    padding:0 10px;
    margin:10px 0;
    font-family:"helvetica";
    background-color:#f1f1f1;
    border-color:#eee;
    cursor:pointer
}
.dropdown .selected{
    z-index:200
}
.dropdown:hover .options{
    display:block
}
.dropdown .options{
    position:absolute;
    display:none;
    top:100%;
    padding:0;
    margin:0;
    overflow:hidden;
    width:100%;
    left:0;
}
.dropdown .options li{}
.dropdown .options li a{
    border-color:#eee;
    display:block;
    background-color:#f1f1f1;
    padding:0 10px;
}
.dropdown .options li a:hover,.dropdown .options li a.selected{
    background-color:lightblue;
    color:white;
}

JS：

var timeout;
$(function(){
    setNewValue2 = function(){
        var _v = this.rel;
        if(typeof _v == "undefined" || _v == "") return;
        timeout = setTimeout(function() {
            highlight(transfer);
        }, _v);
    }

    $(".dropdown a").on("click",function(e){
        e.preventDefault();
        var _r = $(this).attr("rel");
        var _t = $(this).text();
        $(this).parents(".options").find(".item").show();
        $(this).parent().hide();
        $(this).parents(".dropdown").find(".evalued").prop({
            innerHTML : _t,
            rel : _r
        });
        setNewValue2.call(this);
    })
});

工作實例

Answer 3

<!-- Our Dropdown -->
<select id="timeout">
    <option>500</option>
    <option>1000</option>
    <option>1500</option>
</select>
<script>
    var timeout; // we will keep selected value

    $("#timeout").change(function(){
         timeout=$(this).val();
         timeout = setTimeout(function() {highlight(transfer);}, timeout);
    });
</script>