Question

这个网站我想改变他们显示下拉菜单的方式。

http://i.stack.imgur.com/Wu718.jpg

我想这样做，以便默认值为＆＃34;待售商品＆＃34;而不是＆＃34;论坛主题＆＃34;

这是他们的源代码。

       <select name="sec" style="margin-top:5px;width:138px;">

            <option value="topics">Forum Topics</option>

            <option value="s">Items for Sale</option>

            <option value="b">Want to Buys</option>

            <option value="users">Members</option>

       </select>

由于我并不真正关心它的外观，我只想改变价值=＆＃34;主题＆＃34;价值=＆＃34; s＆＃34;即使不改变文本。

我已经阅读了一些教程，但他们大多使用ID和Classes作为选择器，在这种情况下，我如何定位此选择从其网站中的许多其他人选择并更改值。

Answer 1

您可以使用：

$('select[name=sec]').val('s');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
    <option value="topics">Forum Topics</option>
    <option value="s">Items for Sale</option>
    <option value="b">Want to Buys</option>
    <option value="users">Members</option>
</select>

我认为这就是您在下面的评论中所描述的内容：

var dropdown = $('select[name=sec]');
// change the  s  option to  items
dropdown.find('option[value=s]').attr('value', 'items');
// change the  topics  option to  s
dropdown.find('option[value=topics]').attr('value', 's');
// change the dropdown's value to s  
// (first option should continue to be selected because its value is now s)
dropdown.val('s');

// (this is for demo purposes only)
dropdown.after($("<div>").text("New HTML is: " + dropdown[0].outerHTML));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
    <option value="topics">Forum Topics</option>
    <option value="s">Items for Sale</option>
    <option value="b">Want to Buys</option>
    <option value="users">Members</option>
</select>

Answer 2

您可以使用名称或任何其他属性。

for css

select[name="sec"]

或jquery

$('select[name="sec"]').

Answer 3

DEMO检查浏览器中的元素以查看更改您可以选择包含select[name=sec]的选择下拉列表，然后选择option:first

的第一个选项

 $('select[name=sec] option:first').val('s');

如果您需要更改任何选项，请使用.eq()

$('select[name=sec] option').eq(0).val('s');  // eq(0) for the first option element . eq(1) for the second option element ...

Answer 4

如果您想选择其他选项，请使用以下代码：

$('select[name="sec"]').find('option:selected').removeAttr('selected');
$('select[name="sec"]').find('option[value="s"]').attr('selected','selected');

此脚本删除默认选择（第一个选项）并选择具有“s”值的选项。对于演示：

$('select[name="sec"]').find('option:selected').removeAttr('selected');
$('select[name="sec"]').find('option[value="s"]').attr('selected','selected');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
    <option value="topics">Forum Topics</option>
    <option value="s">Items for Sale</option>
    <option value="b">Want to Buys</option>
    <option value="users">Members</option>
</select>

你必须在DOM中找到这个元素。为此，您应该找到具有ID或CLASS属性的第一个父容器元素。通过该元素，您可以使用.find（）方法创建对所需元素的搜索。如果有更多元素具有带有“sec”值的name属性，那么你应该构建一个找到你想要的find链。为此，您可以使用这些功能模板：

$(#CONTAINER_ID).find(.SUBCONTAINER_CLASS).find(ELEMENT_TYPE);
$(#CONTAINER_ID).find(SUBCONTAINER_TYPE).find(OTHER_SUBCONTAINER_TYPE:eq(X));

更改没有id / class的Select Option值

4 个答案: