Question

我试图通过单击不同的div或表行来在选择框上选择多个选项。

我有一个名为#events的多重选择。

我正在使用下面的代码，该代码可以通过简单的selectbox来使用，而不能使用多个代码。

$("td.eventID").on("click", function(e) {
    var $select = $("select#events");
    $select.val($(this).data("value"));

    // simulate click:
    $select.find(":selected").click();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
       <td class="eventID" data-value="1" style="cursor:pointer;">
          FirstEventName      
       </td>
     </tr>
     <tr>
       <td class="eventID" data-value="11" style="cursor:pointer;">
          EV_Hildegard Spinka
       </td>
     </tr>
     <tr>
       <td class="eventID" data-value="14" style="cursor:pointer;">
          EV_Melody Parker
       </td>
     </tr>
     <tr>
       <td class="eventID" data-value="4" style="cursor:pointer;">
          EV_Theodore Auer
       </td>
     </tr>
     <tr>
       <td class="eventID" data-value="17" style="cursor:pointer;">
          EV_Aditya Stracke
       </td>
    </tr>
  </tbody>
</table>

<select name="events[]" id="events" class="form-control" multiple="" required="">
    <option value="1">FirstEventName</option>
    <option value="14">EV_Melody Parker</option>
    <option value="4">EV_Theodore Auer</option>
    <option value="17">EV_Aditya Stracke</option>
    <option value="11">EV_Hildegard Spinka</option>
</select>

Answer 1

您可以用> library(Metrics) > library(MASS) > > data("iris") > > head(iris) Sepal.Length Sepal.Width Petal.Length Petal.Width Species 1 5.1 3.5 1.4 0.2 setosa 2 4.9 3.0 1.4 0.2 setosa 3 4.7 3.2 1.3 0.2 setosa 4 4.6 3.1 1.5 0.2 setosa 5 5.0 3.6 1.4 0.2 setosa 6 5.4 3.9 1.7 0.4 setosa > > iris$setosa <- 0 > iris$setosa[iris$Species == "setosa"] <- 1 > iris_lda <- lda(setosa ~ Sepal.Length + Sepal.Width, iris) > > table(predict(iris_lda)$class) 0 1 101 49 > table(iris$setosa) 0 1 100 50 > > accuracy(iris$setosa, predict(iris_lda)$class) [1] 0.9933333 > > precision(iris$setosa, predict(iris_lda)$class) [1] 1 > > recall(iris$setosa, as.numeric(as.character(predict(iris_lda)$class))) [1] 0.98之类的逗号,分隔多个值，然后在选择它们时将它们分割。

注意：：要以编程方式选择选项后要更新视图，可以使用data-value="books,html"

.change()

$(".eventID").on("click", function(e) {
    $("#events").val($(this).data("value").split(',')).change();
});

Answer 2

我已解决，这要感谢 Zakaria Acharki的回答。但是，我不知道这是否是最好的解决方案，但是它可以按我的意愿工作。

我添加了一个隐藏的输入，它将接收我要选择的所有值。

之后，我对JS代码进行了一些更改，并添加了一个新代码。

    // This code add values to the hidden input with "," and then, selecting every value on multiple select
    $("td.eventID").on("click", function(e) {
        var group = $('#groupingEvents');
        var groupValues = group.val();

        if(groupValues == "") {
            group.val($(this).data("value") + ',');
        } else
            group.val(groupValues + $(this).data("value"));

        $("#events").val(group.val().split(',')).change();
    });

    // This code is used if you click the selectbox to choose a new option, you need to send values to hidden input, otherwise, a bug appears.
    $("#events").on("click", function() {
        var group = $('#groupingEvents');
        var selectValues = $(this).val();

        if(group.val() == "") {
            group.val(selectValues.join(","));
        } else
            group.val(selectValues.join(",") + ',')
    });

$("td.eventID").on("click", function(e) {
    var group = $('#groupingEvents');
    var groupValues = group.val();

    if(groupValues == "") {
        group.val($(this).data("value") + ',');
    } else
        group.val(groupValues + $(this).data("value"));

    $("#events").val(group.val().split(',')).change();
});

$("#events").on("click", function() {
    var group = $('#groupingEvents');
    var selectValues = $(this).val();

    if(group.val() == "") {
        group.val(selectValues.join(","));
    } else
        group.val(selectValues.join(",") + ',')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
       <td class="eventID" data-value="1" style="cursor:pointer;">
          FirstEventName      
       </td>
     </tr>
     <tr>
       <td class="eventID" data-value="11" style="cursor:pointer;">
          EV_Hildegard Spinka
       </td>
     </tr>
     <tr>
       <td class="eventID" data-value="14" style="cursor:pointer;">
          EV_Melody Parker
       </td>
     </tr>
     <tr>
       <td class="eventID" data-value="4" style="cursor:pointer;">
          EV_Theodore Auer
       </td>
     </tr>
     <tr>
       <td class="eventID" data-value="17" style="cursor:pointer;">
          EV_Aditya Stracke
       </td>
    </tr>
  </tbody>
</table>
<input type="hidden" id="groupingEvents" value="">

<select name="events[]" id="events" class="form-control" multiple="" required="">
    <option value="1">FirstEventName</option>
    <option value="14">EV_Melody Parker</option>
    <option value="4">EV_Theodore Auer</option>
    <option value="17">EV_Aditya Stracke</option>
    <option value="11">EV_Hildegard Spinka</option>
</select>

通过单击div选择多选项

2 个答案: