jquery将选项移动到另一个框并具有其值

时间:2014-03-04 12:52:34

标签: javascript jquery html

嗨伙计们,你能帮我在jquery中使用这个功能,第一组盒子正在运行左右盒子而丁字裤但是第二套盒子没有运作而且没有它的价格值我需要修复它它点击>>时会运行按钮它将转到右侧框,当我点击<<它将转到左侧框。

fb.html

<html>
 <head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
 </head>

<body>
   <div>
     <select data-bind="options: foods, optionsText: 'foodName', selectedOptions: foodToBeAdded" multiple></select>
   <input type='button' data-bind="click: addFood" value=' > ' />
    <input type='button' data-bind="click: removeFood" value=' < ' />
   <select data-bind="options: selectedFoods, optionsText: 'foodName', selectedOptions: fo         odToBeRemoved" multiple></select>
     </div>

      <fieldset>
         <legend><p align="left" class=""><b>Reservation Total Price:</b> &nbsp;&nbsp;&nbsp;       </legend> <div data-bind="text: foodPriceTotal"></div>
   </fieldset>
  <script>
    $(document).ready(function () {
    var ViewModel = function () {
        self.foods = ko.observableArray([
            { foodName: 'food1', foodPrice: 100 },
            { foodName: 'food2', foodPrice: 200 },
            { foodName: 'food3', foodPrice: 300 },
            { foodName: 'food4', foodPrice: 400 }
        ]);
        self.selectedFoods = ko.observableArray([]);

        self.foodToBeAdded = ko.observableArray([]);
        self.foodToBeRemoved = ko.observableArray([]);

        self.foodPriceTotal = ko.computed(function () {
            var totalPrice = 0;

            ko.utils.arrayForEach(self.selectedFoods(), function (food) {
                totalPrice += food.foodPrice;
            });

            return totalPrice;
        }, this);

        self.addFood = function () {
            console.log(self.foodToBeAdded());
            var foods = self.foods.removeAll(self.foodToBeAdded());

            ko.utils.arrayForEach(foods, function (food) {
                self.selectedFoods.push(food);
            });
        }

         self.removeFood = function () {
           var foods = self.selectedFoods.removeAll(self.foodToBeRemoved());

           ko.utils.arrayForEach(foods, function (food) {
              self.foods.push(food);
             });
          }

          // console.log(self.foods());
         }

         ko.applyBindings(new ViewModel());
          });
       </script> 
    </body>
   <html>

jsfiddle我需要工作得到这是我需要的样本,但这不起作用 http://jsfiddle.net/kzuMh/1/

1 个答案:

答案 0 :(得分:0)

你有一些重复的id,这是一件坏事...... 我测试了jdfiddle并且它不起作用,我想你想做的是这样的:

var sLeft1 = $('#s-left1');
var sLeft2 = $('#s-left2');
var sRight1 = $('#s-right1');
var sRight2 = s('#s-right2');

使用此功能并修改ID应该有效...

http://jsfiddle.net/kzuMh/2/