使用另一个选择列表jquery的值更改选择列表的值

时间:2018-03-26 13:54:12

标签: javascript jquery

如何使用另一个选择列表的值更改选择列表的值

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

需要将#ReplaceThisText#替换为从上面的选择框中选择的值

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

我尝试过此链接中的代码Change the Text of a Option with jQuery  和jquery how to find and replace a selected option that has a certain value 但似乎无法让它工作

我的代码是

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

1 个答案:

答案 0 :(得分:1)

:contains会查看.text()值 - 但您的#ReplaceThisText#不在.text()值中 - 因此您需要使用.filter()来查找它代替:

添加一些console.logs,以便您可以查看正在发生的事情并更新.val(newval)代码以进行替换。

$('#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>