jQuery Select Box Manipulation

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:

// 选择下拉框选项
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 是选项值列表
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();

// 删除除第一个和最后一个元素之外的所有元素
// #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 查找下拉框中选定的项目
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!