更改输入范围更改时的选择框答案

【问题标题】：Change select box on input range change更改输入范围更改时的选择框
【发布时间】：2014-08-05 08:46:14
【问题描述】：

我想知道如何在范围更改时更改选择框上的选定选项，例如，如果范围的值为 1，则选择第一个选项，然后选择值为 2，以此类推

<input type="range" min="1" max="3" step="1" data-rangeslider/>
<select id="price-leval" name="price_leval">
<option value="first" id="asdasd">1st level</option>
    <option value="second" id="asdasd">2nd level</option>
    <option value="third" id="asdasd">3rd level</option>
</select>

我需要将选项值保持为 value="first" 第二和第三。

【问题讨论】：

您有任何代码 sn-ps 可以提供您之前的尝试吗？
jsfiddle.net/5Hu4q 在那里你可以看到它改变了选定的值，从 1-3 但在 3-1 上没有正确改变

标签： jquery input drop-down-menu range

【解决方案1】：

编辑：看看这个Fiddle。

HTML

<select>
    <option value="1" id="asdasd">Первый уровен</option>
    <option value="2" id="asdasd">wqe</option>
    <option value="3" id="asdasd">asd</option>
</select>

jQuery

$("input[type=range]").on('change', function(){
    $("select").val($(this).val());
});

如果您不想更改该值，请使用this：

$("input[type=range]").on('change', function(){
    $('select :nth-child('+$(this).val()+')').prop('selected', true);
});

【讨论】：

它工作得很好，但我需要输入的值保持第一，第二，第三

【解决方案2】：

这是我的工作解决方案：

HTML

<input id="range" type="range" min="1" max="3" step="1">
<select id="price-leval" name="price_leval">
   <option value="first" id="opt1">1st level</option>
   <option value="second" id="opt2">2nd level</option>
   <option value="third" id="opt3">3rd level</option>
</select>`

脚本

 $("#range").mousemove( function(e){      
    $("#price-leval").val(decodeNumber($(this).val()));
 });

function decodeNumber(number){
if(number=="1"){
return "first";
}
if(number=="2"){
return "second";
}
if(number=="3"){
return "third";
}

}

确保 jquery 已加载到您的页面中这是fiddle

警告在我看来，在选项值中使用字符串而不是数字不是一个好习惯

【讨论】：

它工作得很好，但我需要输入的值保持第一，第二，第三

【解决方案3】：

可以使用自定义属性“label”解决问题

<select id="price-leval" name="price_leval">
    <option value="first" label='1'>1st level</option>
    <option value="second" label='2'>2nd level</option>
    <option value="third" label='3'>3rd level</option>
</select>

然后使用标签访问选项的值

$("input[type=range]").on('change', function(){
    var value = $("select#price-leval>option[label='"+$(this).val()+"']").attr("value");
    $("select").val(value);
});

【讨论】：