How to have different link

问题

I am new in JS > jQuery > select2 and ... english language! My problem: I would like that the link in http://jsfiddle.net/JfWtJ/1/ is dynamic.

So, in first time, I test :

function format(state) {
    return state.text + "<a class='info' target='_blank' href='http://obs43/test.php?param="+state.id+"'  >link</a>";
}

(see http://jsfiddle.net/7J8Ag/) but it's not ok.

In second time, I test http://jsfiddle.net/7J8Ag/1/ with:

$("#select").on('open', function() { 
    $('.select2-results i').on('mouseup', function() { 
        $('#select').on('change', function() { 
            window.open("http://obs43/test.php?param=" + $("#select").val());
        });
    }); 
});

It's ok for the first select, but at the second select, there are two "window.open", at the third select, there are three "window.open", etc.

Why? How do I do this correctly?

I specify that I want that "window.open..." start with ONLY to click on "link" and not with "$('#select').on('change'..."

I use the second write because

$("#select").on('open', function() { 
$('.select2-results i').on('mouseup', function() { 
     window.open("http://obs43/test.php?param=" + $("#select").val()); 
}); "

seem ok but if you see precisely, you remark that $("#select").val() is the precendly item, and not $("#select").val() of the choice in the list. And this last princip is correct in the full list but it's not ok when you use the list after a first search...

回答1:

Use this js it will fix your problem

 function format(state) {
// if (!state.id) return state.text; // optgroup
return state.text + "<i class='info' id='"+state.id+"'>link</i>"+state.id;
//return state.text + "<a class='info' target='_blank' href='http://obs43/test.php?param="+state.id+"  >link</a>";
}

$("#select").select2({
formatResult: format,
escapeMarkup: function(m) { return m; }
});

   $("#select").on('open', function() { 
$('.select2-results i').on('mouseup', function(event) { 
  //  alert(event.target.id);
     window.open("http://obs43/test.php?param=" +event.target.id);
}); 
});

Add this function

$("#select").on('open', function() { 
$('.select2-results i').on('mouseup', function(event) { 
  //  alert(event.target.id);
     window.open("http://obs43/test.php?param=" +event.target.id);
}); 
});

回答2:

You should not have events being bound within other event callbacks. For example in your code, on every "mouseup" on '.select2-results i' a new 'change' event handler gets attached to '#select' because you are attaching the event in the callback of the mouseup event. In simpler terms, what your code is doing - "when I mouseup on this link attach an event to #select". Hence multiple events get attached. Hence multiple windows get opened up.

All you would need is one single event which would look like this

$('#select').on('change', function() { 
    window.open("http://obs43/test.php?param=" + $("#select").val(), "linkWindow");
});

If you want to open all the links in the same new tab/window then in window.open pass the second optional "name" argument. Setting a name for your window makes sure that the new link would open in the window with that name "linkWindow", instead of opening another window. If a window with that name does not exist then a new window (with that name) opens up.

Here is the complete fiddle. http://jsfiddle.net/7J8Ag/3/

来源：https://stackoverflow.com/questions/20930899/how-to-have-different-link

标签

jquery

jquery-select2