Change value of select list with value of another select list jquery

Question

How can I change the value of a select list with the value of another select list

<select class="main-filter" id="Test1" name="Test1"><option value="">Select Option</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>

Need to replace #ReplaceThisText# with value selected from above select box

<select id="selectfilter" name="selectfilter" class="form-control main-filter">
                        <option value="">Sort Products</option>
                        <option value="/?id=na&amp;selectfilter=hl&amp;Type=#ReplaceThisText#">Chnage Value</option>

                    </select>

I have tried code from this link Change the Text of a Option with jQuery and jquery how to find and replace a selected option that has a certain value but cannot seem to get it to work

My code is

$('#Test1').change(function () {
        sessionStorage.setItem("Test1", $(this).val());
        $('.main-filter :selected:contains("#ReplaceThisText#")').val($(this).val());
        location.href = $(this).val();
    });

fdomn-m · Accepted Answer · 2018-03-26 14:03:47Z

:contains will look at the .text() value - but your #ReplaceThisText# is not in the .text() value - so you'll need to use .filter() to find it instead:

Adding some console.logs so you can see what's happening and updated the .val(newval) code to make the replacement.

$('#Test1').change(function() {
  var newval = $(this).val();
  console.log("before", $(".main-filter :contains('Change Value')").val())
  var opt = $('.main-filter option').filter(function() {
      return $(this).val().indexOf("#ReplaceThisText#") >= 0;
  });
  console.log("opt length", opt.length);
  opt.each(function() { 
      $(this).val($(this).val().replace(/#ReplaceThisText#/gi, newval));
  });
  console.log("after", $(".main-filter :contains('Change Value')").val())
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="main-filter" id="Test1" name="Test1">
  <option value="">Select Option</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

<select id="selectfilter" name="selectfilter" class="form-control main-filter">
  <option value="">Sort Products</option>
  <option value="/?id=na&amp;selectfilter=hl&amp;Type=#ReplaceThisText#">Change Value</option>
</select>

Collectives™ on Stack Overflow

Change value of select list with value of another select list jquery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related