jQuery - 在按钮上单击触发器选择选项

时间:2015-03-23 14:30:06

标签: javascript jquery html

伙计们,我想问一下当我点击一个按钮触发选择菜单中的选项时,如何在jQuery中创建一个函数。

这是我的HTML代码:

<select id="target_menu" name="sort_by">
    <option selected="selected" id="position" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=position">Позиция</option>
    <option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=name">Име</option>
    <option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=price">Цена</option>
    <option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=color">Color</option>
    <option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=created_at">Дата</option>
</select>

我想要被选中的选项是created_at

以下是点击以选择ID为created_at的选择菜单标识为target_menu的选项时所需的按钮代码:

<button onclick="triggerChange()" class="FirstFilter">
    Click me!
</button>

当我点击按钮时 - &gt; Click Me!我希望jQuery在标识为created_at的选择菜单中强制/触发ID为target_menu的选项。

我的函数triggerChange()必须如何?

那么伙计们,我怎么能成功呢?

6 个答案:

答案 0 :(得分:3)

尝试此功能:

 function triggerChange(){
        $("#target_menu").val($("#target_menu #created_at" ).val());
        $('#target_menu').trigger('change');
   }

答案 1 :(得分:1)

实现目标的方法很少。一个在下面。一条建议是不要使用内联事件处理程序!

$("button").on("click", function() {
    $("#target_menu option").filter(function(opt, el) {
        return el.id === 'created_at' && $(el)
    }).prop("selected", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="target_menu" name="sort_by">
    <option selected="selected" id="position" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=position">Позиция</option>
    <option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=name">Име</option>
    <option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=price">Цена</option>
    <option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=color">Color</option>
    <option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=created_at">Дата</option>
</select>

<button class="FirstFilter">
    Click me!
</button>

答案 2 :(得分:1)

window.HTMLElement.prototype.scrollIntoView = function() {};
function triggerChange()
{
  $("#target_menu").val($("#created_at").val());
}

这是您问题的答案。

<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
<select id="target_menu" name="sort_by">
    <option selected="selected" id="position" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=position">Позиция</option>
    <option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=name">Име</option>
    <option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=price">Цена</option>
    <option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=color">Color</option>
    <option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=created_at">Дата</option>
</select>

<button onclick="triggerChange()" class="FirstFilter">
    Click me!
</button>

答案 3 :(得分:0)

因为你有一个id应用于每个选项,你可以定位该id然后使用.prop()方法。

$(document).ready(function(){
 $(".firstFilter").click(function(){
    var id = $("#created_at").prop("selected","selected");   
 });
});

答案 4 :(得分:0)

使用此

function triggerChange(){    
$("#target_menu").eq(4).prop("selected","selected");     
}

答案 5 :(得分:-1)

我为你做了这个小提琴

Fiddle

第一步是从ID为created_at的元素中获取值:

var wantedValue= $('#created_at').attr('value');

接下来,您需要为select元素设置选定的值:

$('#target_menu').val(wantedValue).trigger('change');  // need to call .trigger('change') here
// you can also call .trigger() - without 'change' keyword

解释为什么需要触发.change HERE

  

对于选择框,复选框和单选按钮,会触发该事件   当用户使用鼠标进行选择时,立即进行   事件的其他元素类型延迟到元素丢失   对焦。

更新(感谢LShetty)

$('.FirstFilter').click(function(){
       $("#position").removeAttr("selected");
       $("#created_at").attr('selected','selected');
    });