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

【问题标题】：jquery cross browser copy text to textbox issuejquery跨浏览器复制文本到文本框问题
【发布时间】：2010-02-24 22:06:50
【问题描述】：

下拉菜单

在我的网站中，我有一组这样设置的 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 选项时，它会获取该选项的文本并将其复制到搜索框中。用户然后在搜索框上按 go 来搜索文本。这在 Firefox 中运行良好。但是，它在 Safari 中表现不佳。我想知道它有什么问题。我知道在以前的设置中，我在无序列表中使用了列表标签 (li)，而 safari 似乎能够很好地获取文本值。但是，它不会从 OPTION 标记内部获取文本，在这种情况下我需要使用选项标记。我想知道是否有某种解决方法。谢谢！

【问题讨论】：

+1 欢迎使用 Stack Overflow！

标签： javascript jquery textbox

【解决方案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() );
});

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

【讨论】：

你好乔纳森，谢谢！我让这比需要的复杂得多。我很欣赏快速反应。我有一个问题。如果我在同一页面上有 4 个下拉菜单怎么办。例如，一个 id 为 entry 的另一个 id 为 horse 等。我是否只需要创建 4 个相同的 js 语句，还是有办法将它们链接在一起。在 4 个下拉列表中，只会搜索一个值。因此，如果他们从条目中选择一个值，它将填充搜索框，但如果他们从 horse 中选择一个值，它将用新值覆盖搜索框中的内容。我希望我很清楚。 :)
@bob：我已经更新了我的答案来解决你的问题。请记住，如果您发现此答案有帮助，请考虑通过单击其旁边的复选标记来接受它。谢谢！
谢谢乔纳森，这很好用。我看到它不适用于 IE6 和 IE7。是否有人也可以对此进行测试以仔细检查并可能解释为什么它不起作用？
@bob：我刚刚在 IE 中进行了测试，它对我有用。我使用 jQuery 1.4.2 进行了测试。请务必更新您的本地参考。如果您仍然遇到问题，有些人建议绑定到 .click 事件而不是 .change，但我不确定我是否会感到安全。
啊，好吧。感谢您的反馈，我认为这可能是误报，因为我使用了“IETester”，而且我知道有时它与 javascript 不准确。

【解决方案2】：

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

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

.val 只会给你选择的值

这将是在您的 Value 和 Text 当然不同的情况下

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

【讨论】：