javascript - 选择相同的下拉选项时，更改事件上的 Jquery 未触发

Question

您好，我有一个像这样的下拉菜单，我有一个文本区域字段。我希望每当使用下拉列表中的选项时，下拉列表中的选定值将附加在文本区域字段中，并且我已经为下拉列表使用了更改事件，但问题是当我再次选择相同的值时，更改事件是不开火。我已经搜索过，很多人建议使用下拉菜单的点击事件，但是当我使用点击事件时，我选择的测试出现了两次，但我只想显示下拉菜单的选定文本。我的 JS 代码就像这个。

<select class="form-control" id="drpLinkType">
    <option value="2" selected="selected">Post</option>
    <option value="2">Pre</option>
    <option value="2">Test</option>
</select>

$('#drpLinkType').click(function () {
    debugger;

    var $txt = $("#txt");
    var caretPos = $txt[0].selectionStart;
    var textAreaTxt = $txt.val();
    var txtToAdd = $('#drpLinkType :selected').text();
    $txt.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos));

})

jsfiddle.net/w0c9o7ox创建 js fiddle 。在这里您可以看到，如果我单击相同的选项，则它不起作用

Answer 1

设置.value的 <select>为空字符串 ""使用 this.value = ""或 $(this).val("")在 change 的最后一行事件，否则如果相同 <option>陆续被选中.value没有改变。

您还可以包括 <label>带有 for 的元素属性设置为 <select> .id设置当前值 .textContent所选 <option> .

$('#drpLinkType').on('change', function () {
        //debugger;
        var $txt = $("#txt");
        var caretPos = $txt[0].selectionStart;
        var textAreaTxt = $txt.val();
        var txtToAdd = $('#drpLinkType :selected').text();
        $txt.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos));
        this.labels[0].innerHTML = this.selectedOptions[0].textContent;
        $('#drpLinkType').val("");
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="drpLinkType">
        <option value="0">Please select a option</option>
        <option value="2">Post</option>
        <option value="2">Pre</option>
        <option value="2">Test</option>
    </select><label for="drpLinkType"></label>
    <textarea id="txt" rows="15" cols="70" placeholder="Enter text ..." ></textarea>