選擇列表操作

此問題與至少另一個問題類似，但解決方案對我沒有幫助。我有一些在jQuery 1.4中運行良好的代碼，但不再工作。我有兩個按鈕（用於）允許用戶瀏覽選擇列表。這裏的工作版本：選擇列表操作

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body> 
<button onclick="setOption(-1)">&#8592;</button> 
<button onclick="setOption(1)">&#8594;</button> 
<select name="select1" id="select1"> 
    <option value=""></option> 
    <option value="one">one</option> 
    <option value="two">two</option> 
    <option value="three">three</option> 
</select> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
</body> 
</html>

JS：

function setOption(num) { 
    var current = $("#select1").attr("selectedIndex") 
    var next = current + num; 
    $('#select1 option:eq('+next+')').attr('selected', 'selected'); 
}

什麼我需要更新，以使其工作，譬如說，jQuery的1.11.0？

在此先感謝！

來源

2014-04-22 user3561924

鏈接的代碼似乎對我在Firefox 28.0/OS工作X 10.8.5。 –

在Chrome中運行 - > Win 8.1 – tymeJV

在28.0 Win XP中無法運行 –

DEMO

使用.prop()

function setOption(num) { 
    var current = $("#select1").prop("selectedIndex"); 
    var next = current + num; 
    $('#select1 option:eq('+next+')').prop('selected', true); 
}

儘量避免 使用內聯JS原因難以維護。
使用而ID選擇，如：

<button id="prevOption">&#8592;</button> 
<button id="nextOption">&#8594;</button>

，這是所有你需要：

LIVE DEMO 2

function setOption() { 
    var num = this.id.match('prev') ? -1 : 1; 
    var curr = $("#select1").prop("selectedIndex") + num; 
    $('#select1 option:eq('+curr+')').prop('selected', true); 
} 

$('#prevOption, #nextOption').click(setOption);

或者也驗證碼：

LIVE DEMO 3

個

$('#prevOption, #nextOption').click(function(){ 
    var n = this.id.match('prev')?-1:1; 
    $('#select1').prop("selectedIndex", function(i,v){return v+n;}); 
});

一些很好的讀數：
.prop() vs .attr()
https://softwareengineering.stackexchange.com/questions/86589/why-should-i-avoid-inline-scripting
When should I use Inline vs. External Javascript?

來源

2014-04-22 20:02:03

謝謝，先生！真正感謝... – user3561924

@ user3561924不客氣 –

-1

<button id="a">&#8592;</button> 
<button id="b">&#8594;</button> 

<select id="select1"> 
<option value=""></option> 
<option value="one">one</option> 
<option value="two">two</option> 
<option value="three">three</option> 
</select>

的jQuery 1.11.0

$(function() { 
    $('#a').click(function(){ 
    var num = this.id.match('prev')+1; 
    var curr = $("#select1").prop("selectedIndex") + num; 
    $('#select1 option:eq('+curr+')').prop('selected', true); 
    }); 
    $('#b').click(function(){ 
    var num = this.id.match('prev')-1; 
    var curr = $("#select1").prop("selectedIndex") + num; 
    $('#select1 option:eq('+curr+')').prop('selected', true); 
    }); 
});

來源

2014-04-22 20:20:51 AvrilAlejandro

你真的不需要所有那些重複的代碼行，它太冗長了，而不是我們應該編程的方式，因爲更清潔的解決方案看看我的答案;）還有什麼是假設這條線做'var num = this.id.match（'prev'）+ 1;'？同樣在下一個點擊處理程序'var num = this.id.match（'prev'） - 1;'？對我來說，似乎是我的代碼實際上是一個糟糕的複製粘貼。在你的示例中'this.id.match（'prev'）'返回'null'並且比你對它做了一些奇怪的操作，* prev - next *也有點反轉。 –

我的回答是在你編輯之前。不能複製!! – AvrilAlejandro

5分鐘後，我可以看到http：// stackoverflow。com/posts/23229092 /修訂版，但沒想到你沒有回答我的問題。爲什麼使用'this.id.match（'prev'）'？代碼中的「prev」是什麼？我只能看到這兩個按鈕' ' –

選擇列表操作

回答

相關問題