带有添加或删除值的选择器 [英] Selectpicker with add or delete values

问题描述

我有一个引导选择器.我有一个 timeRange 值列表.

I've got a bootstrap selectpicker. I've got a list of timeRange values.

<select class="selectpicker">

<option data-icon="" value="00:00-23:59">All Day (12am-11:59pm)</option>
<option data-icon="fa fa-coffee" value="05:00-08:59">Morning (5am-8:59am)</option>
<option data-icon="fa fa-briefcase" value="09:00-16:59">Business Hours (9am-4:59pm</option>
<option data-icon="fa fa-moon-o" value="17:00-20:59">Evening (5pm-8:59pm)</option>
<option data-icon="fa fa-clock-o" value="00:00-11:59">AM Hours (12am-11:59am)</option><option data-icon="fa fa-clock-o" value="12:00-23:59">PM Hours (12pm-11:59pm)</option><option data-icon="fa fa-clock-o" value="00:00-05:59">12am-5:59am</option>
<option data-icon="fa fa-clock-o" value="06:00-11:59">6am-11:59am</option>
<option data-icon="fa fa-clock-o" value="12:00-17:59">12pm-5:59pm</option>
<option data-icon="fa fa-clock-o" value="18:00-23:59">6pm-11:59pm</option>

</select>

用例:我想添加或删除其中一些并将生成的 JSON 发送到后端.

Usecase: I want to add or remove some of them and send the resulting JSON to backend.

这是我试过的:

 http://jsfiddle.net/M69TH/18/

我有一个名为删除"的按钮，基本上如果我点击它，我想从选择器中删除一个 timeRanges 并将 JSON 重新发送到后端.

I have a button called "Remove" essentially if i click that, I want to remove one of the timeRanges from the selectpicker and re-send the JSON to the backend.

我怎样才能做到这一点?

How can I achieve this?

推荐答案

这将用于从 selectpicker 中删除所选元素:

This will work for deleting selected element form the selectpicker:

function modifications() {
  $('.selectpicker option:selected').remove();
  $('.selectpicker').selectpicker('refresh');
}

用于将 json 发送到后端:

For sending json to backend:

function send() {
    var jsonData = {
         name: "value"; //change this according to your needs
    }

    $.ajax({
        url: 'backend url', //change this
        type: 'post',
        dataType: 'json',
        success: function (data) {
            // any msg you want to display on success
        },
        data: jsonData
    });
}

这篇关于带有添加或删除值的选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！