从使用JQuery选择的列表中设置选项

时间:2012-04-19 20:21:25

标签: jquery jquery-selectors drop-down-menu

我有一个<select></select>现在该列表包含一些选项,例如a, b, and c现在我希望当用户在a中输入textbox并点击按钮a时在选择列表中选择,从此以后,任何人都可以帮助我在 JQuery 中实现这一目标。

5 个答案:

答案 0 :(得分:2)

对于下面的标记,

<select id="selectOpt">
   <option value="a">a</option>
   <option value="b">b</option>
   <option value="c">c</option>
</select>

<input type="textbox" id="txtbox1" />

<button id="sch">Select</button>

下面的脚本应该可以解决问题,

$('#sch').on('click', function () {      //<-Bind click handler for button using .on
     var txtVal = $('#txtbox1').val();   //<-Get the value entered in the textbox

     if ($('#selectOpt option[value=' + txtVal + ']').length > 0) {
        //^-- Above line checks if the entered value exist in the options list

        $('#selectOpt').val(txtVal );    //<-Set the value of the select with the entered value
     }
});

DEMO

答案 1 :(得分:2)

使用Javascript:

$(function(){
  $("#someButton").click(function(){
    $("#someSelect").val($("#someInput").val());
  });
});

Html:

<select id="someSelect">
    <option>a</option>
    <option>b</option>
    <option>c</option>
</select>
<input id="someInput" type="text" />
<button id="someButton">Go</button>

请参阅此处的工作示例:http://jsbin.com/ipevaz/3/edit

答案 2 :(得分:2)

假设这是你的select

<select>
    <option id="a" value="a"/>
    <option id="b" value="b"/>
    <option id="c" value="c"/>
    <option id="d" value="d"/>
</select>

这是你input

<input type="text" id="textbox" /> <input type="button" id="button"/>

这是你的script

<script>
    $('#button').click(new function(){
        var option = $("#textbox").val();
        $('select #'+option).attr("selected='true'"); 
    });
</script>

这会有用吗?

答案 3 :(得分:0)

<select>
  <option value="a">a</option>
  <option value="b">d</option>
  <option value="c">c</option>
</select>

<input type="text" id="letext" maxlength="1"/>
<input type="button" id="select" value="Select" />
​


$('#select').click(function(){

    $('select option[value=' +  $('#letext').val() +']').prop('selected','true')
    });​

http://jsfiddle.net/chepe263/UNmT8/

按钮功能是找到一个值等于输入

的选项

答案 4 :(得分:0)

您可以使用以下HTML来完成此操作。

<input type="text" id="input" />
<input type="button" id="btn" value="Move to Select" />

<select>
    <option value="a">a</option>      
    <option value="b">b</option>      
    <option value="c">c</option>  
</select>​

以及此jQuery代码段。

<script type="text/javascript">
    $(function () {
        $('#btn').click(function () {
            $('select option[value="' + $('#input').val() + '"]').prop('selected', true);   
        });
    });​
</script>

查看this Fiddle是否有工作演示。希望有所帮助! :)