[JQuery] jQuery對select的操作

房東：阿凱
發表時間：2011-04-10

get
- 取出選擇的值
  
  $("select#Club").val(); $('select#Club option:selected').text();
  
  以上2方法在單選時相同，但複選時，
  
  val()會用逗號分開 ex. AA, BB
  
  text()不會 ex. AABB
- 取出array
  
  $("select#Club").children("[@selected]").each(function(){ alert(this.text()); });

set
- 使某option變為selected
  
  $("#select1").children().each(function(){ if ($(this).text()=="option you want"){ //jQuery給法 $(this).attr("selected","true"); //或是給selected也可 //javascript給法 this.selected = true; } });
- 讓新增的option直接為selected
  
  var option = jQuery("new option"); $('select#Club').append(option); $(option).attr("selected","true"); //讓option為selected $('select#Club').trigger("change"); //最後要觸發select的change事件
- select下拉框的第二個元素為當前選中值
  
  $('select#Club')[0].selectedIndex = 1;//不知為何要加[0]
  
  =========== K. T. Chen 提到 ==========================
  
  在$("")加[0]的意思是把jQuery物件轉為DOM物件。這樣子jQuery物件才能使用DOM底下的selectedIndex方法。

event

//改變時的事件

$("select#Club").change(function(){ //事件發生 //一次印出 alert($(this).val()); //印出選到多個值 jQuery('option:selected', this).each(function(){ alert(this.value); }); });

移除

removeOption(index/value/regex[, selectedOnly])

$('select#Clubs option:selected').remove();

//純javascirpt

<select onchange="alert('Index: ' + this.selectedIndex + '\nValue: ' + this.options[this.selectedIndex].value)"> ... </select>

參考

http://www.texotela.co.uk/code/jquery/select/

http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html

贊助網站

廣利不動產-新板特區指名度最高、值得您信賴的好房仲
您的托付,廣利用心為您服務
廣利不動產-板橋在地生根最實在--新板特區指名度最高、值得您信賴的好房仲
完整房訊，房屋、店面熱門精選物件，廣利不動產優質仲介，房屋租賃、買賣資訊透明，交易真安心！

1 樓住戶：小凱
發表時間：2011-04-12

<!DOCTYPE html> 
<html> 
<head> 
  <style> 
  img { padding:10px; } 
  div { color:red; font-size:24px; } 
</style> 
  <script src="http://code.jquery.com/jquery-1.5.js"></script> 
</head> 
<body> 
   
  <img /> 
  <img /> 
  <img /> 
 
  <div><B>Attribute of Ajax</B></div> 
 
<script> 
$("img").attr({  
  src: "/images/hat.gif", 
  title: "jQuery", 
  alt: "jQuery Logo" 
}); 
$("div").text($("img").attr("alt")); 
</script> 
 
</body> 
</html>

Demo:

Example: Disable buttons greater than the 1st button.

<!DOCTYPE html> 
<html> 
<head> 
  <style> 
  button { margin:10px; } 
</style> 
  <script src="http://code.jquery.com/jquery-1.5.js"></script> 
</head> 
<body> 
   
  <button>0th Button</button> 
  <button>1st Button</button> 
  <button>2nd Button</button> 
 
<script> 
$("button:gt(1)").attr("disabled","disabled"); 
</script> 
 
</body> 
</html>

Demo:

Example: Set the id for divs based on the position in the page.

<!DOCTYPE html> 
<html> 
<head> 
  <style> 
  div { color:blue; } 
  span { color:red; } 
  b { font-weight:bolder; } 
        </style> 
  <script src="http://code.jquery.com/jquery-1.5.js"></script> 
</head> 
<body> 
   
  <div>Zero-th <span></span></div> 
  <div>First <span></span></div> 
  <div>Second <span></span></div> 
 
<script> 
$("div").attr("id", function (arr) { 
  return "div-id" + arr; 
}) 
.each(function () { 
  $("span", this).html("(ID = '<b>" + this.id + "</b>')"); 
}); 
</script> 
 
</body> 
</html>

Demo:

Example: Set the src attribute from title attribute on the image.

<!DOCTYPE html> 
<html> 
<head> 
  <script src="http://code.jquery.com/jquery-1.5.js"></script> 
</head> 
<body> 
   
<img title="hat.gif"/> 
 
<script> 
$("img").attr("src", function() {  
    return "/images/" + this.title;  
}); 
</script> 
 
</body> 
</html>

Demo:

　共 1 人回應　　選擇頁數【第1 頁】

姓名：

佈告內容：

其他選項: