Question

我有以下代码：

<select id="selectbasic" name="selectbasic" class="input-block-level" ng-model="formData.coWorkers">
    <option value="">-- Choose amount of customers --</option>
    <option value="0-4">0 - 4</option>
    <option value="5-24">5 - 24</option>
    <option value="25-99">25 - 99</option>
    <option value="100-249">100 - 249</option>
    <option value="250-">over 250</option>                    
</select>

formData.coWorkers可以拥有此类信息“50”，“15-50”和“120-”。公司中同事的数量或范围。

我想做的是以下内容：

在formData.coWorkers中查找数字，例如。 15-50
首先拆分此信息并选择最高编号（50）
查看select - ＆gt;选项值，用于查找其中包含50的数字范围。第三个选项值“25-99”
“15-50”应选择“25-99”

但我不知道如何或从哪里开始。有没有人可以帮我解决这个问题？

亲切的问候，尼尔斯

Answer 1

试试这个。

<script>
    function selectWorkersAmount(workersCount) {
        var selectBox = document.getElementById('selectbasic');
        for (var i = 0; i < selectBox.options.length; i++) {
            var optionValue = selectBox.options[i].value;
            if (optionValue) {
                var range = optionValue.split("-");
                if (workersCount >= range[0]) {
                    if (workersCount <= range[1] || range[1] == "") {
                        selectBox.selectedIndex = i;
                    }
                }
            }
        }
    }
</script>

    <select id="selectbasic" name="selectbasic" class="input-block-level" ng-model="formData.coWorkers">
        <option value="">-- Choose amount of customers --</option>
        <option value="0-4">0 - 4</option>
        <option value="5-24">5 - 24</option>
        <option value="25-99">25 - 99</option>
        <option value="100-249">100 - 249</option>
        <option value="250-">over 250</option>
    </select>
    <br>
    <button onclick="javascript:selectWorkersAmount(1);">1 worker</button><br>
    <button onclick="javascript:selectWorkersAmount(100);">100 workers</button><br>
    <button onclick="javascript:selectWorkersAmount(250);">250 workers</button>

Answer 2

尝试这种方式：

在您看来：

<input type="text" ng-model="formData.coWorkers" />

<select id="selectbasic" name="selectbasic" class="input-block-level" ng-model="selected" ng-options="r as r.text for r in ranges" >
    <option value="">-- Choose amount of customers --</option>                 
</select>

在您的控制器中：

$scope.ranges = [
    { text: "0 - 4",     min: 0, max: 4 }, 
    { text: "5 - 24",    min: 5, max: 24}, 
    { text: "25 - 99",   min: 25, max: 99},
    { text: "100 - 249", min: 100, max: 249}, 
    { text: "over 250",  min: 250}
];
$scope.formData = {};
$scope.$watch('formData.coWorkers', function(nv, ov) {
    if (nv) {
        var values = new String(nv).split('-');
        var min = new Number(values[0]).valueOf();
        var max = new Number(values[1]).valueOf();
        angular.forEach($scope.ranges, function(value, index) {
            if (min >= value.min && (max <= value.max || !max || !value.max)) {
                $scope.selected = value;
            } else if (max >= value.min) {
                $scope.selected = value
            }                
        });
    } else {
        $scope.selected = "";
    }
});

Working fiddle

从数字中选择更改选项

2 个答案: