CODEWITHSUNDEEP
javascriptjqueryhtmldrop-down-menu
Bob
Bob

Reputation: 413

Change text value span where class matches attribute of select field option

Question: How can I change the text inside a span where the span class matches the select field option attribute? And also making it flexible so I don't need to hard code all the attributes and span classes?

I think I need some solution where a JS function searches and matches span classes with the option attributes and if there is a match the span text should be updated.

Demo select field with option attributes

<select class="conditional-element-selector">
    <option value="select-element-1" weight="12" size="20" persons="10">Option 1</option>
    <option value="select-element-2" weight="24" size="40" persons="20">Option 2</option>
    <option value="select-element-3" weight="48" size="80" persons="40">Option 3</option>
</select>

Demo HTML where span needs to change based on option attribute that matches span class

<div class="conditional-element-1">   
    <li>Weight: <span class="weight">12</span> kg </li>
    <li>Persons: <span class="persons">10</span></li>
    <li>Size: <span class="size">20</span> m3 </li>
</div>

JS function I want to create to search for an option attribute and search for a span class inside ".conditional-element-1" and if there is a match, update the span text. I need to be able to add more attributes and spans as well. 

$('select.conditional-element-selector').on('change', function() {
  var targetIndex = this.selectedIndex + 1; // This looks at which option is selected
  $('.conditional-element-' + targetIndex).... // This is unfinshed 

// Extend function here to match different span classes with different option attributes and change span text 

});

Upvotes: 0

Views: 321

Answers (1)

matthias_h
matthias_h

Reputation: 11416

I changed your HTML in order to be valid - it's better to use data-attributes to store information like weight, size and persons. In addition it's easier to keep this solution dynamic as it reads all attributes from the selected option and appends them with their value in case the attribute name starts with "data".

$(document).ready(function() {
   $('select.conditional-element-selector').on('change', function() {
      var targetIndex = this.selectedIndex;
      var selected = $(this).children("option:selected");
         $(selected).each(function() {
            $.each(this.attributes, function() {
             if (this.name.startsWith("data")) {
               var attrName = this.name.substr(5);
               $('.conditional-element-' + targetIndex).find("." + attrName).text(this.value)
             }
            });
         });
   });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="conditional-element-selector">
  <option>Please select</option>
  <option value="select-element-1" data-weight="12" data-size="20" data-persons="10">Option 1</option>
  <option value="select-element-2" data-weight="24" data-size="40" data-persons="20">Option 2</option>
  <option value="select-element-3" data-weight="48" data-size="80" data-persons="40">Option 3</option>
</select>
<div class="conditional-element-1">
  <ul>
<li><span class="weight"></span> kg</li>
<li><span class="persons"></span></li>
<li><span class="size"></span> m3</li>
  </ul>
</div>
<div class="conditional-element-2">
   <ul>
<li><span class="weight"></span> kg</li>
<li><span class="persons"></span></li>
<li><span class="size"></span> m3</li>
  </ul>
</div>
<div class="conditional-element-3">
   <ul>
<li><span class="weight"></span> kg</li>
<li><span class="persons"></span></li>
<li><span class="size"></span> m3</li>
  </ul>
</div>

Upvotes: 1

Related Questions