javascript - 如何在 jquery 文本框的更改事件中将下拉列表选定项的值替换为某个值？

Question

我有一个下拉列表和一个文本框。我正在尝试通过更改文本框中的文本将下拉列表中的选定值替换为某个值。

这是我的代码:

<select class="form-control Series-1 valid" name="CRMFields" id="CRMFields">
    <option>None</option>
    <optgroup label="Lead Information"></optgroup>
    <option value="First Name^Lead ID^">Lead ID</option>
    <option value="First Name^First Name^" selected="">First Name</option>
    <option value="First Name^Last Name^">Last Name</option>
</select>
<input class="defaultValue" data-target-class="Series-1" id="DefaultValue" name="DefaultValue" type="text" value="">

JQuery:

<script type="text/javascript">
    $(document).ready(function () {
        $(".defaultValue").change(function () {
            var thisval = $(this).val();
            var targetclass = $(this).attr("data-target-class");
            var CRMFiledValue = $("." + targetclass).val();
            var arr = CRMFiledValue.split('^');
            var left = arr[0];
            var middle = arr[1];
            var last = thisval;
            var replaceText = left + "^" + middle + "^" + last;
            alert(replaceText);
            alert($("." + targetclass).prop("value", replaceText));
            alert($("." + targetclass).val());               
        });
    });
</script>

但是上面的代码在警告框上显示 [object Object] 和 null 而不是连接值。

我想在文本框的更改事件中将选定的值项替换为某个值。

JSFiddle

在此先感谢您的帮助。

Answer 1

部分问题在于，每当有人更改输入框的值时，您都会更改每个选项的值。

所以我将 + option:selected 添加到 var CRMFiledValue 的选择器中。我假设这就是您想要的，因为您可能不希望每个字段都具有 FirstName^FirstName^thisval 作为它的值。下面的代码已经根据您的 HTML/其他 javascript 的设置方式进行了测试和工作

    $(document).ready(function () {
        $(".defaultValue").change(function () {
            var thisval = $(this).val();
            var targetclass = $(this).attr("data-target-class");
        
            var CRMFiledValue = $("." + targetclass + ' option:selected').val();
            var arr = CRMFiledValue.split('^');
            var left = arr[0];
            var middle = arr[1];
            var last = thisval;
            var replaceText = left + "^" + middle + "^" + last;        
        
            $("." + targetclass + ' option:selected').prop("value", replaceText);
        });
    });