Question

下拉

在我的网站中，我有一组像这样设置的SELECT下拉列表。

<OPTION class="addTitleTag">400</OPTION>

搜索框

还有一个搜索框，如下所示。

input type="text" class="textbox" onblur="search_SearchBlock_blur()" onfocus="search_SearchBlock_focus()" value="Search" name="g2_form[searchCriteria]" size="18" id="searchCriteria"

Javascript

    jQuery(function() {
    jQuery('.addTitleTag').click(function() {
        titleText = jQuery(this).attr('text');
        jQuery("#searchCriteria").val(titleText);
        //$('#go_button').click(); //acts as if the search "go" button was clicked.
    });
});

这个想法是当从OPTION中选择Dropdown选项时，它会获取该选项的文本并将其复制到搜索框中。然后用户按下搜索框上的搜索文本。这在firefox中运行正常。然而，它在Safari中表现不佳。我想知道它的问题是什么。我知道在之前的设置中我使用了无序列表中的list标签（li），safari似乎能够很好地获取文本值。但是，它不会从OPTION标记内部获取文本，在这种情况下我需要使用选项标记。我想知道是否有某种工作。谢谢！

Answer 1

当select的change事件触发时，您需要获取select元素的当前值：

$(".myselect").change(function(){
  $(".search").val( $(this).val() );
});

在线演示：http://jsbin.com/apuba/edit

请注意，此方法不需要在HTML本身中添加onblur或onfocus事件逻辑。相反，只要你给它足够的选择器，它就会自行绑定。

<input type="text" name="search" class="search" />

<select class="myselect" name="foo">
  <option>100</option>
  <option>200</option>
  <option>300</option>
</select>

HTML中无需进一步。

更新

您也可以绑定多个下拉列表来执行此操作。假设您有以下内容：

<select id="product_1">
  <!-- options -->
</select>

<select id="product_2">
  <!-- options -->
</select>

您可以使用以下内容绑定这两个：

$("#product_1, #product_2").change(function(){
  $(".search").val( $(this).val() );
});

请注意，我只是通过修改选择器来添加新的下拉列表。

Answer 2

要使用jquery获取ddl的选定文本，您需要执行以下操作：

$("#yourdropdownid option:selected").text();

.val 只会获得所选的值

如果您的值和文字当然不同

这可以从StackOverflow上提出的问题jquery-get-selected-text-from-dropdownlist中看出

jquery跨浏览器将文本复制到文本框问题

下拉

搜索框

Javascript

2 个答案:

更新