jQuery, problem when deselecting the selected item in several dropboxes that change dynamically

Question

jQuery, problem when deselecting the selected item in several dropboxes that change dynamically

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I have several dropboxes and I want that when selecting an option in one of them, the rest change to that option. The id's and the waltz change dynamically, so I can not use them to select them, instead I use the text of each option, which does it is the same and the letter 'a' of the id's that is common to all.

The problem I have is that if I select a value in one of them, they all change (right here), but if I go back to a previous option, they do not change anymore. Viewing the source code dynamically, what happens is that the options are adding the attribute selected="selected" and not delete the previous, although I try.

This is the functional code I made and I get the error .

$(document).on('change', "select[name^='a']", function() {
  var txt = $("option:selected", this).text();
  console.log(txt);
  $("select[name^='a']").not(this).each(function() {
    $("option:selected", this).attr('selected', false);
    $('option:contains(' + txt + ')', this).attr('selected', 'selected');
  });
});

<select name="a0" id="a0">
    <option value="1" selected="selected">80x180</option>
    <option value="2">80x190</option>
    <option value="3">80x200</option>  
    <option value="4">90x180</option>
    <option value="5">90x190</option>
</select>
<select name="a1" id="a1">
    <option value="6" selected="selected">80x180</option>
    <option value="7">80x190</option>
    <option value="8">80x200</option>
    <option value="9">90x180</option>
    <option value="10">90x190</option>
</select>
<select name="a2" id="a2">
    <option value="11" selected="selected">80x180</option>
    <option value="12">80x190</option>
    <option value="13">80x200</option>
    <option value="14">90x180</option>
    <option value="15">90x190</option>
</select>

In jsfiddle it is also.

How do I have to do to erase the previous select that had the dropbox?

javascript jquery

asked by Eduardo de la Torre 02.08.2017 в 16:45

source

2 answers

Create java application to .exe with Launch4j Hide image when loading page through onchange function

score 1 · Answer 1

Do not use attr use prop

$("option:selected", this).prop('selected', false);
$('option:contains(' + txt + ')', this).prop('selected', 'selected');

	$( document ).on( 'change', "select[name^='a']", function(){
		var txt = $("option:selected", this).text();
		console.log(txt);
		$("select[name^='a']").not(this).each(function() {
			$("option:selected", this).prop('selected', false);
			$('option:contains(' + txt + ')', this).prop('selected', 'selected');
		});
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="a0" id="a0">
	<option value="1" selected="selected">80x180</option>
	<option value="2">80x190</option>
	<option value="3">80x200</option>
	<option value="4">90x180</option>
	<option value="5">90x190</option>
</select>
<select name="a1" id="a1">
	<option value="6" selected="selected">80x180</option>
	<option value="7">80x190</option>
	<option value="8">80x200</option>
	<option value="9">90x180</option>
	<option value="10">90x190</option>
</select>
<select name="a2" id="a2">
	<option value="11" selected="selected">80x180</option>
	<option value="12">80x190</option>
	<option value="13">80x200</option>
	<option value="14">90x180</option>
	<option value="15">90x190</option>
</select>

link

score 0 · Answer 2

Your code is almost perfect. The only mistake is in using:

$().attr("selected", "selected");

The correct syntax is:

$().prop("selected", true);

O:

$().prop("selected", false);

Here you have it working:

link