如何阻止用戶選擇DropDown選項而不「禁用」它？

我在我的應用的兩個dropdown菜單。一種是允許用戶選擇最小貨幣選擇，另一種是最大貨幣選擇。

的問題：

如果用戶選擇在最小的值下拉即比所述值大的最大下拉列表中選擇讓說作爲然後我想顯示一個彈出對話框通知他們他們不能做到這一點，然後停止選中最小下拉列表中的被單擊的項目。

我可以用看到很多例子：

.disable

但我不想「灰掉」任何選項只是確認點擊每個項目的時間，然後被選中停止該項目。

這可能嗎？任何幫助，將不勝感激。

來源

2016-02-07 user1352057

就個人而言，我想簡單地修改這兩個下拉菜單的模式。 IE瀏覽器。一旦用戶在最小下拉列表中選擇4，最大下拉列表中的值從4開始（甚至5）。反之亦然。 –

您可以使用選擇菜單上的「更改」事件來檢查值，然後決定如何處理。

document.getElementById('your_dropdown_id').addEventListener('change', myfct);

其中「myfct」是測試該值的函數。

來源

2016-02-07 18:53:22 Marc

是這樣的？

var validate = true; 
if (FirstSelectedValue > SecondSelectedValue){ 
alert('first selected value must be higher or equal to second value'); 
validate = false; 
}

//等。無論您將信息傳遞給..

if (validate && your other options..){ 
//continue, first value is lower or equal to second value.. 
}

一個更好的選擇時，第一個值已被選定，只允許有效的選擇是隻填充第二個值。

來源

2016-02-07 18:55:52 user2267175

我會解決這個以編程方式手動處理點擊下拉菜單。例如：

$('.dropdown-min').on('click', function(e) { 
e.preventDefault(); 
if($(e.target).val() < $('.dropdown-max').find(":selected").val()) { 
    $(e.target).attr('selected', 'selected'); 
} 
});

來源

2016-02-07 19:11:19

你可以做這樣的：

JS Fiddle

// grab the two dropdowns with their classname on change event 
 
$('.min-max').on('change', function() { 
 
    var $th = $(this), 
 
    id = $th.attr('id'); 
 

 
    // pass the id and the value to the function 
 
    updateMinMax(id, parseInt($th.val())); 
 
}) 
 

 
function updateMinMax(id, v) { 
 

 
    // determine the id of the other dropdown 
 
    var otherID = (id == 'minimum') ? 'maximum' : 'minimum', 
 
    thisDropdown = $('#' + id), 
 
    otherDropdown = $('#' + otherID); 
 

 
    // we need to make sure the other dropdown value is set so we need 
 
    // to add this condition otherDropdown.val() != '' 
 
    if (id == 'minimum' && otherDropdown.val() != '' && thisDropdown.val() > otherDropdown.val()) { 
 
    // if a selected value from minimum dropdown is MORE than 
 
    // the selected maximum value 
 
    alert('minimum cannot be greater than maximum'); 
 
    // reset current dropdown selection 
 
    thisDropdown.val(''); 
 
    } else if (id == 'maximum' && otherDropdown.val() != '' && thisDropdown.val() < otherDropdown.val()) { 
 
    // if a selected value from maximum dropdown is LESS than 
 
    // the selected minimum value 
 
    alert('maximum cannot be less than minimum'); 
 
    thisDropdown.val(''); 
 
    } 
 
}

select{width:50px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
Min:<select class="min-max" id="minimum"> 
 
    <option></option><option value="0">0</option><option value="1">1</option> 
 
    <option value="2">2</option><option value="3">3</option><option value="4">4</option> 
 
    <option value="5">5</option><option value="6">6</option><option value="7">7</option> 
 
    <option value="8">8</option></select><hr> 
 
Max:<select class="min-max" id="maximum"> 
 
    <option></option><option value="1">1</option><option value="2">2</option> 
 
    <option value="3">3</option><option value="4">4</option><option value="5">5</option> 
 
    <option value="6">6</option><option value="7">7</option><option value="8">8</option> 
 
    <option value="9">9</option></select>

來源

2016-02-07 19:38:26

如何阻止用戶選擇DropDown選項而不「禁用」它？

回答

相關問題