Question

我想知道如何在范围更改的选择框中更改所选选项，例如，如果范围的值为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>

我需要选项值保持为值=＆＃34;首先＆＃34;第二和第三。

Answer 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);
});

Answer 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>`

<强> SCRIPT

 $("#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

警告在我看来，在选项值

中有一个字符串而不是数字并不是一个好习惯

Answer 3

使用自定义属性“标签”

可以解决问题

<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);
});

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

3 个答案: