Core points

• jQuery provides a variety of ways to operate drop-down boxes, including adding, deleting, and changing options using methods such as append(), remove() and val(). Be sure to use the $() function to select the drop-down box before applying any method.
• To get the current value of the selected option, use the val() method. The text of the selected option can be obtained using the text() method. Multiple values ??can be retrieved using the each() function.
• The onChange event in jQuery can be used to identify the selected options in the drop-down box. This event triggers a function that looks for the text of the selected option.

Introduction

Operating the drop-down box in jQuery requires extra tricks and interactions, but it is not complicated. This article will help you easily handle the drop-down box operation.

Create a drop-down box

This should be very simple and straightforward:

jQuery('#some_element').append('');

Updated January 6, 2011 – Three different ways to select the drop-down box option:

// 選擇下拉框選項(xiàng)
jQuery('#selectboxid option').attr('selected', true);
jQuery('#selectboxid option').attr('selected', selected);
$("#selectboxid").attr('selectedIndex', indexnumber);

Use jQuery to operate the drop-down box option

The following is the code to add options to the drop-down box. Just paste and edit parts to suit your needs.

// obj 是選項(xiàng)值列表
function(obj) {
  var create = '';
  for (var i = 0; i < obj.length; i++) {
    create += '<option value="' + obj[i] + '">' + obj[i] + '</option>';
  }
  create += '';
  jQuery('#some_element').append(create);
}

Alternatively, you can create an option in the list of elements and attach it with pure jQuery:

function(id, obj) {
  jQuery('#some_element').append('<select id="' + id + '"></select>');
  jQuery.each(obj, function(val, text) {
    jQuery('#' + id).append(
      jQuery('<option></option>').val(val).html(text)
    );
  });
}

Get the value in the drop-down box

We may need to know the current value of the selected option.

// #selectbox 是下拉框的 ID
jQuery('#selectbox option:selected').val();

You can get the text of the option by:

// #selectbox 是下拉框的 ID
jQuery('#selectbox option:selected').text();
jQuery('#selectList option[value=\'thisistheone\']').text();
jQuery('#selectList option:first').text();
jQuery('#selectList option:eq(3)').text();
jQuery('#selectList option:not(option:first, option:last)').each(function() {
  jQuery(this).text();
});

Get multiple values ??in the drop-down box

Use this code to retrieve multiple values:

jQuery('#some_element:selected').each(function() {
  alert(jQuery(this).text());
  alert(jQuery(this).val());
});

var current = [];
jQuery('#some_element:selected').each(function(index, selectedObj) {
  current[index] = jQuery(selectedObj).text();
});

var foo = jQuery('#multiple :selected').map(function() {
  return jQuery(this).val();
}).get();

Delete elements in the drop-down box

Nothing special here. Just paste this code and modify it so that you can delete the item of your choice.

jQuery('#selectbox :selected').remove();

// 刪除除第一個(gè)和最后一個(gè)元素之外的所有元素
// #selectbox 是下拉框的 ID
jQuery("#selectbox option:not(option:first, option:last)").remove();

Select options in the drop-down box

Do this to select an option in the drop-down box:

jQuery('#selectbox option').attr('selected', 'selected');

Deselect option

Reverse operation of the above code:

jQuery('#selectbox option').attr('selected', false);

onChange Event Find Selected Options

jQuery('#selectbox').change(function() {
  var val = jQuery(this).find('option:selected').text();
  alert('我選擇了：' + val);
});

// onchange 查找下拉框中選定的項(xiàng)目
jQuery('#selectbox').change(function() {
  jQuery(this).find('option:selected').each(function() {
    alert('我選擇了：' + jQuery(this).text());
  });
});

Conclusion

If you follow the steps correctly, you should be able to complete the task. As you can see, this is not difficult!

Frequently Asked Questions about jQuery drop-down box operation

(The FAQ part is omitted here because its content is highly duplicated from the previous content. In order to avoid redundancy, I will not repeat it here. The content of the FAQ part can be regenerated as needed, just reorganize the questions and answers in a more concise and clear language.)

The above is the detailed content of jQuery Select Box Manipulation. For more information, please follow other related articles on the PHP Chinese website!