I used php and jquery. I have to generate multiple select tag depends on the value of condition. I need to manipulate both html,php and and jquery by using loop but I can't find the answer for this to work.
php html code... I like to populate multiple select tag with different classname
<?php $count = 2; ?>
<div id="comments" hidden><?php echo htmlspecialchars($count); ?></div>
<?php for($i = 1; $i <= $count; $i++){ ?>
<input type="text" readonly="readonly" class="resone<?php echo $i; ?>" id="resone">
<select name="artist_1" class="part<?php echo $i; ?>" id="part">
<option value="" disabled selected>Select Category</option>
<option value="1">medicine</option>
<option value="2">shoes</option>
</select>
<?php }?>
jquery. I like to put the onchange function into the loop to manipulate the target class value
<script>
$(function() {
var count = document.getElementById("comments").textContent;
for (var i = 1; i <= count; i++) {
$('.part' + i).change(function() {
var display = $('.part' + i).find(":selected").val();
$('.resone' + i).val(display);
})
}
})
</script>
I hope you could help me with this one.
You are overcomplicating things and abusing the class by adding a counter to it.
Here is my suggestion - you can actually ignore the IDs and the script does not care about the count, just about how many ".part" there are
$(function() {
$(".part").on("change", function() {
$(this).prev(".resone").val(this.value);
})
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" readonly="readonly" class="resone" id="resone0">
<select name="artist_1" class="part" id="part0">
<option value="" disabled selected>Select Category</option>
<option value="1">medicine</option>
<option value="2">shoes</option>
</select>
<hr/>
<input type="text" readonly="readonly" class="resone" id="resone1">
<select name="artist_1" class="part" id="part1">
<option value="" disabled selected>Select Category</option>
<option value="1">medicine</option>
<option value="2">shoes</option>
</select>PHP: - the IDs are not even used
<?php for($i = 1; $i <= $count; $i++){ ?>
<input type="text" readonly="readonly" class="resone" id="resone<?php echo $i; ?>">
<select name="artist_1" class="part" id="part<?php echo $i; ?>">
<option value="" disabled selected>Select Category</option>
<option value="1">medicine</option>
<option value="2">shoes</option>
</select>
<?php }?>
You don't need to use a for loop, just give the select a common class and do like this:
$(function() {
$('.part').change(function() {
var display = $(this).val();
$(this).next('.resone').val(display);
})
})
Since I can't see the element with the class resone i can't make sure if $(this).next('.resone').val(display) works.
Code example
$(function() {
$('.part').change(function() {
var display = $(this).val();
$(this).next('.resone').val(display);
})
})<?php $count = 2; ?>
<div id="comments" hidden>
<?php echo htmlspecialchars($count); ?>
</div>
<?php for($i = 1; $i <= $count; $i++){ ?>
<select name="artist_1" class="part" >
<option value="" disabled selected>Select Category</option>
<option value="1">medicine</option>
<option value="2">shoes</option>
</select>
<?php }?>