jQuery: Trigger jQuery on select from multiple selectbox?

JavaScript
1

I’m trying to figure out how to trigger my jQuery function each time a option is selected in my multiple selectbox?

Here is what i got:

<select id="newbtn" name="test" multiple="multiple"> 
<?
    $str = '<b>This is a test!</b>Why doesnt this WORK!<div>Just testing...</div>';
	
	$results = preg_match_all('~<([^/][^>]*?)>~', $str, $arr); 
	$arr = array_unique($arr[1]);
	
	foreach($arr as $arr1=>$value){
		echo '<option">'.htmlentities('<'.$value.'>').'</option>';
	}
?>
</select>

<?
echo '<div id="strDiv">';
echo $str;
echo '</div>';
?>

$('#newbtn').click(function() {
	$('#strDiv').each(function() {
		var s = '<?=$str;?>',
		sel = document.getElementById("tags"),
		re;
		for (var i = 0, len = sel.options.length; i < len; i++) {
			if (sel.options[i].selected) {
				re = new RegExp(sel.options[i].text.replace("<", "<\\\\/?").replace(">", "[^>]*?>"), "gi");
				s = s.replace(re, "");
			}
		}
		$(this).html(s);
	});
});

Nothing happens when a option is selected? If I do it with a button like this:

<input type=“button” value=“Go Jquery” id=“newbtn”/>

Then it works, but I would like to do it without the use of a button…

Thanks in advance :wink:

2

Try using the change event instead.

3

Tryied this but no luck:

$(‘#strDiv’).change(function() {

Did you meen something else?

4

Do you have a test page that demonstrates the problem, or failing that can you provide us with the HTML code that you’re having the problem with?

PHP code is processed by the server and doesn’t get to the client page where JavaScript runs, so knowing what the HTML code actually is allows us to work out the problem.

5

Ups… Got it working.

My selectbox looks like this

<select id="tags" name="test" multiple="multiple">

And then the jQuery looks like this:

$('#tags').click(function() {
	$('#strDiv').each(function() {
		var s = '<?=$str;?>',
		sel = document.getElementById("tags"),
		re;
		for (var i = 0, len = sel.options.length; i < len; i++) {
			if (sel.options[i].selected) {
				re = new RegExp(sel.options[i].text.replace("<", "<\\\\/?").replace(">", "[^>]*?>"), "gi");
				s = s.replace(re, "");
			}
		}
		$(this).html(s);
	});
});

The issue was the first line in the jQuery:

$('#tags').click(function() {

I had #newbtn instead of #tags.

Thanks al ot for your help :wink:

6

One more question though…

If I break my $str by hitting enter somewhere in the text it wont work??? Any ideas!

Working $str:

$str = '<b>This is a test!</b>Why doesnt this WORK!<div>Just testing...</div>';

This dont work?:

$str = '<b>This is a test!</b>Why doesnt this WORK!
	<div>Just testing...</div>';

Please help…

7

It breaks due to a syntax error, due to the string on the first line not being complete.
You can tell JavaScript that the first line continues by ending that first line with a backslash.

8

Oh yes, but what if I get the text from something I don’t have controll over?

9

Then you need to exert control over it, via I suspect some appropriate PHP coding.

10

If I insert a “\” in my php text it will show the backslash? Is there a way to check for syntax errors in javascript and correct it here?

11

Not that I know of, no.

12

Found the solution…

$str = str_replace("\
","", $str);
$str = str_replace("'","\\'", $str);

Thanks a lot.