选择相同的下拉选项时，Jquery on change 事件未触发

Question

嗨，我有一个这样的下拉菜单，我有一个 textarea 字段。我希望在使用下拉列表中的选项时，下拉选择的值将附加在文本区域字段中，并且我已经为下拉列表使用了更改事件，但问题是当我再次选择相同的值时，更改事件是不开火。我已经搜索过，很多人建议使用下拉菜单的点击事件，但是当我使用点击事件时，我选择的测试会出现两次，但我只希望出现下拉菜单的选定文本。我的 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 小提琴。在这里您可以看到，如果我单击相同的选项，则它不起作用

Answer 1

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

您还可以包含<label> 元素，并将for 属性设置为<select> .id 值以设置选定.textContent 的当前.textContent。

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

Answer 2

使用点击甚至代替。像这样（为了清楚起见，我将文本的附加部分移到了一个单独的函数中）：

$('#drpLinkType').on('click', function (event) {
  var text = $('#drpLinkType :selected').text();
  appendText(text);
});

function appendText(text) {
  var $txt = $('#txt');
  var caretPos = $txt[0].selectionStart;
  var textAreaTxt = $txt.val();
  $txt.val(textAreaTxt.substring(0, caretPos) + text + textAreaTxt.substring(caretPos));
}

<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>
    <textarea id="txt" rows="15" cols="70" placeholder="Enter text ..." ></textarea>

但是，如果您可以控制 HTML，这将是最佳选择：

$('#drpLinkType').on('click', function (event) {
  appendText(event.target.value);
});

function appendText(text) {
  var $txt = $('#txt');
  var caretPos = $txt[0].selectionStart;
  var textAreaTxt = $txt.val();
  $txt.val(textAreaTxt.substring(0, caretPos) + text + textAreaTxt.substring(caretPos));
}

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