使用jQuery从COMBO BOX获取选定的值

Question

What I'm trying to do is get the selected x-combo-list-item , Partner from the x-combo-list . How would I do so? Please help. Thank you.

Please refer to my jsfiddle for code reference. --> JSFiddle

----------------New Question------------------

Does .each() automatically run when if "Partner" is selected?

Answer 1

http://jsfiddle.net/littlefyr/H6yeJ/

JQuery allows you to select based on the content of the element. So you simply use selectors to do what you want:

$('.x-combo-list-item:contains("Partner")').click(function() {
    var $this = $(this);
    alert('You have selected Partner!');
    commonFunction($this);
});

$('.x-combo-list-item:not(:contains("Partner"))').click(function() {
    var $this = $(this);
    alert('You have not selected Partner!');
    commonFunction($this);
});

function commonFunction(item){
    // do Ajaxy stuff
};

This fails when you start changing the text (like when you have to translate the text). In this case you simply add a constant value to the tags and use attribute selectors:

$('.x-combo-list-item[data-val=pnr]').click(function() {
    var $this = $(this);
    alert('You have selected Partner attribute wise!');
    commonFunction($this);
});

$('.x-combo-list-item[data-val!=pnr]').click(function() {
    var $this = $(this);
    alert('You have not selected Partner attribute wise!');
    commonFunction($this);
});
$('.x-combo-list-item:not([data-val=pnr])').click(function() {
    var $this = $(this);
    alert('You have not selected Partner alternative attribute wise!');
    commonFunction($this);
});

You also can combine those with .x-combo-selected and :not(.x-combo-selected) in order to handle selected items differently.

If you're adding items via code (or even as a matter of principle) you should delegate the events to a relevant ancestor:

$('.x-combo-list-inner')
.on('click', '.x-combo-list-item:contains("Partner")',function() {
    var $this = $(this);
    alert('You have selected Partner! Again');
    commonFunction($this);
}).on('click', '.x-combo-list-item:not(:contains("Partner"))', function() {
    var $this = $(this);
    alert('You have not selected Partner! again');
    commonFunction($this);
})

Answer 2

If I understand correctly, you want to alert when the user clicks on the div which contains the text partner?

$('.x-combo-list-item').click(function() {   
    if ($(this).text() === "Partner") {
        alert('You have selected Partner!');

        // Fire your ajax call here
        /*
        $.post('handler.php', {data: data : {even: 'more data'}}, function(data), 'json');
        */
    }
});

You had a call to retrieve data-item which doesn't exist, so I'm not entirely sure.

Answer 3

Try This:

$('#ext-1111 div').each(function() {
  if (jQuery(this).html() == "Partner") {
    alert("This is Partner")
  }
});

Regards

Answer 4

$('id if box').val('Partner') ; This will do.