Question

我使用选择选择器来创建城市下拉列表。现在我正在做一个练习，我必须得到所选的选项文本并将其附加到没有逗号（，）的div。

如果我选择了

City1，City4，City5

这是我选择的piker代码：

<select class="selectpicker citySelectPiker" name="city" id="city" multiple data-style="btn-white" data-live-search="true">
    <option value="1">City1</option>
    <option value="2">City2</option>
    <option value="3">City3</option>
    <option value="4">City4</option>
    <option value="5">City5</option>
</select>

现在点击我想在div里面选择这样的文字：

<div id="job_desc_preview">
   <button class="btn btn-primary waves-effect waves-light btn-xs">City1</button>
   <button class="btn btn-primary waves-effect waves-light btn-xs">City4</button>
   <button class="btn btn-primary waves-effect waves-light btn-xs">City5</button>
</div>

我试过这个剧本：

 var city_string = $('.citySelectPiker').find('.filter-option').text();

基本上，我希望逗号分隔字符串的不同div中的每个元素。

这是Div点击它我希望逗号分隔的字符串放在div中。

<button type="button" class="btn btn-info waves-effect" id="previewButton">Preview</button>

必需的输出。

点击此按钮点击想要获得所选（ citySelectPiker ）值并希望将其置于（ job_desc_preview ）div。
中

Answer 1

要实现这一目标，您可以使用map()创建所选选项的文本内容数组，然后将join()该数组放在一起，如下所示：

$('.citySelectPiker').change(function() {
  var selectedText = $(this).find('option:selected').map(function() {
    return $(this).text();
  }).get().join(',');
  
  console.log(selectedText);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selectpicker citySelectPiker" name="city" id="city" multiple data-style="btn-white" data-live-search="true">
    <option value="1">City1</option>
    <option value="2">City2</option>
    <option value="3">City3</option>
    <option value="4">City4</option>
    <option value="5">City5</option>
</select>

Answer 2

用于在逗号分隔字符串的div中添加值。

首先创建字符串：

l <- c("A", "B", "C", "D")
temp <- data.frame(posi = c(1, 2, 3, 3, 2), 
                   from= factor(c("A", "B", "C", "D", "D"), levels = l, ordered = TRUE),
                   to = factor(c("C", "D", "D", "C", "A"), levels = l, ordered = TRUE)
                   ) 


xyplot(from ~ posi , type="p", col="black",  data=temp, pch=16, xlim = c(0,7), 
       drop.unused.levels = FALSE,  ## the added code
       panel = function(...){
         panel.dotplot(x = temp$posi, y = temp$from, col ="green", cex=1.6)
         panel.dotplot(x = (temp$posi+1), y = temp$to, col="black", cex=1.)
         panel.arrows(x0 = temp$posi, y0 = temp$from, x1 = temp$posi+1, y1 = temp$to, lwd=2, col="blue" )
       })

temp <- temp[1:3, ]
xyplot(from ~ posi , type="p", col="black",  data=temp, pch=16, xlim = c(0,7), 
       drop.unused.levels = FALSE,  ## the added code
       panel = function(...){
         panel.dotplot(x = temp$posi, y = temp$from, col ="green", cex=1.6)
         panel.dotplot(x = (temp$posi+1), y = temp$to, col="black", cex=1.)
         panel.arrows(x0 = temp$posi, y0 = temp$from, x1 = temp$posi+1, y1 = temp$to, lwd=2, col="blue" )
       })

现在将该字符串拆分为数组。

List<Integer> ints;
while (!(ints = this.nextInts()).isEmpty()) {
// do work
}

现在，在div中添加该数组值。

$('.citySelectPiker').change(function() {
  var selectedText = $(this).find('option:selected').map(function() {
    return $(this).text();
  }).get().join(',');

  console.log(selectedText);
});

从选择的piker中获取选定的选项文本，并在单击时将其附加到div

2 个答案: