Javascript 如何交换下拉列表值？

我有两个下拉列表（即一个具有最小值的下拉列表和另一个具有最大值的下拉列表）。如果我在第一个下拉列表中选择的值大于第二个下拉列表中的值，则必须将其交换。但我使用了普通的交换方法，它只适用于输入框

这是我的自定义下拉代码：

HTML：

  <div  class="dropdown">
     <ul>
       <li class="prfdwn" data-value="value" ng-repeat="value in data" ng-
        click="setMaxVal(val)" ng-blur="swap()">{{value.txt}}</li>
     </ul>
  </div>
 <div class="dropdown">
   <ul>
      <li class="prfdwn" data-value="value" ng-repeat="value in data" ng-
      click="setMinVal(val)" ng-blur="swap()">{{value.txt}}</li>
   </ul>
  </div>

$scope.data = [{
"id": 1,
"txt": 1,
 },
{
"id": 2,
"txt": 2,
},
{
"id": 3,
"txt": 3,
},
 {
 "id": 4,
"txt": 4,
 },
 {
"id": 5,
"txt": 5,
}];

   vm.swap = function () {
    if (vm.minVal != "" && vm.minVal != undefined && vm.maxVal != "" && 
  vm.maxVal  != undefined) {
        if (vm.minVal > vm.maxVal ) {
            var tempVal = vm.minVal;
            vm.minVal = vm.maxVal ;
            vm.maxVal  = tempVal;
        }

    }
}

---

如何解决此问题？

一个

li

元素不接收焦点，因此

模糊事件将永远不会触发。HTML结构中的一个小更改可能有助于：




{{value.txt}




{{value.txt}



a
元素确实接收焦点，并且
blur
事件将对它们触发

现在，这就是治疗症状。您可能想重新考虑如何构建HTML（可能有两个
元素），但这应该可以解决您眼前的问题

我制作了一个示例代码段，其中实际的交换被放入
setVal
函数中

在您的代码片段中，这个
ng click=“setMinVal（val）”
我认为应该是
ng click=“setMinVal（value）”

无论如何，请检查此代码段是否能帮助您完成所需操作。如果要更改行为，可以在
setVal
函数中执行


var-app=angular.module（'app'，[]）；
app.controller（'AppController'，['$scope'，'$timeout'，函数（$scope，$timeout）{
$scope.minValue=''；
$scope.maxValue=''；
$scope.swapText=''；
$scope.setVal=函数（值，dropdownFlag）{
//在这里，您可以更改正在处理的对象的属性
var val=value.txt；
if（dropdownFlag==1）{
//来自minValue下拉列表
如果（$scope.maxValue>=val）{
$scope.minValue=val；
}else if（$scope.maxValue==''）{
//最大值仍未设置，因此我们可以设置最小值
$scope.minValue=val；
}否则{
//似乎maxValue小于所选值-交换它们
$scope.minValue=$scope.maxValue；
$scope.maxValue=val；
showSwapText（）；
}
}否则{
//来自maxValue下拉列表
如果（$scope.minValue>val）{
//最小值大于选定值，然后交换
$scope.maxValue=$scope.minValue；
$scope.minValue=val；
showSwapText（）；
}否则{
//似乎maxValue小于所选值-交换它们
$scope.maxValue=val；
}
}
}
$scope.data=[{
“id”：1，
“txt”：1，
},
{
“id”：2，
“txt”：2，
},
{
“id”：3，
“txt”：3，
},
{
“id”：4，
“txt”：4，
},
{
“id”：5，
“txt”：5，
}
];
函数showSwapText（）{
$scope.swapText='SWAPPED！'；
$timeout（函数（）{
$scope.swapText=''；
}, 1000);
}
}]);
。下拉列表{
浮动：左；
}

最小值为{minValue}}
最大值为{maxValue}}
{{swapText}}
分钟

{{value.txt}

马克斯

{{value.txt}

模糊事件不会发生在
li
元素上，因为默认情况下它不会获得焦点。您可能希望将
ng click
和
ng blur
移动到嵌套在
li
@Mike McCaughan中的锚元素，请您解释清楚。您好，朋友，对于这种文本响应，如何检查更大的条件（即{val:1，txt:“4英尺1英寸或124.46cm”）。这里是您在setVal（值，1）中给出的，如何对文本执行此操作。@bpbsr如果您知道对象的val属性表示这对的强度，则可以使用
var val=value.val而不是
var val=value.txt
内置
setVal
函数，否则可以使用
regex
解析txt属性并获得进行比较所需的值。