Loop onchange function to manipulate the target class name-CodePudding

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.

CodePudding user response：

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 }?>

CodePudding user response：

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

Show code snippet

$(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 }?>