Question

嗨，我有一个这样的下拉菜单，我有一个textarea字段。我想当从下拉列表中使用选项时，下拉选择的值将附加在文本区域字段中，并且我已使用更改事件作为下拉列表，但问题是当我再次选择相同的值时，更改事件是不开火。我搜索过很多人建议使用下拉单击事件，但是当我使用click事件时，我选择的测试出现了两次，但我只想显示下拉列表的选定文本。我的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

在.value事件的最后一行使用<select>或""将this.value = ""的{{1}}设置为空字符$(this).val("")，否则设为change { {1}}已连续选中，<option>未更改。

您还可以添加.value元素，并将<label>属性设置为for <select>值，以设置所选.id的当前.textContent。< / p>

<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("");
    })

Answer 2

请改为使用Click even。像这样（为了清楚起见，我将文本附加到单独的函数中）：

＆＃13;

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

＆＃13;

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

＆＃13;

但是，如果您可以控制HTML，那么这将是最佳的：

＆＃13;

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

＆＃13;

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

＆＃13;

选择相同的下拉选项时，不会触发更改事件上的Jquery

2 个答案: