Question

如何在单选按钮中单击是时在下拉列表中设置特定值选择？

所以这是html标记：

<ul class="list-inline">
  <li><label id="ribbonPop">
      <input type="radio" name="yesno"> Yes
    </label></li>
  <li><label id="ribbonNoPop">
      <input type="radio" name="yesno"> No
    </label></li>
</ul>

并且对于exmaple来说这是我在下拉列表中的标记：

<select>
<option>no price</option>
<option>with price</option>
</select>

我想要发生的是当我在单选按钮中单击YES时，选项的值应为“with price”。怎么做？请帮助。非常感谢和更多的力量！

Answer 1

您首先需要bind a click event输入。然后，在事件处理程序中，您需要grab the value点击的输入。然后，您需要为选项元素分配一些值，以便find选择适当的选项。最后，您希望set the selected property选择该选项。

尝试按照上述方法进行操作，如果不起作用，请发布代码更新。

Answer 2

您可能想尝试一下。

以下是html代码：

<ul class="list-inline">
  <li><label id="ribbonPop">
      <input type="radio" name="yesno" value="withprice"> Yes
    </label></li>
  <li><label id="ribbonNoPop">
      <input type="radio" name="yesno" value="noprice"> No
    </label></li>
</ul>

<select id="select-yesno">
<option value="noprice">no price</option>
<option value="withprice">with price</option>
</select>

以下是jquery代码：

$("input[name=yesno]").change(function(){
    var value = $(this).val();
    $("#select-yesno").val(value);
});

请注意，为了使其正常工作，您仍需要包含可在此处下载的jquery库https://jquery.com/。

Answer 3

在问题中使用HTML，您可以使用以下jQuery来实现所需的行为：

// Cache optimized jQuery object for target <option> element
// so that it does not have to be newly found after each click event
// Select the first <option> element whose text exactly matches the indicated string
var $withPriceOption = $("option").filter(function () {
        return $(this).text() === "with price";
    }).eq(0);

// Initialize click event handler
$("#ribbonPop").find("input").click(function () {
   $withPriceOption.attr("selected", true);
});

请注意，上述解决方案可以解决上述问题，但正如其他一些答案所建议的那样，您应该向目标元素添加唯一标识的HTML属性，以使JS A）与特定的更少耦合HTML / DOM结构和B）与特定文本较少耦合。通过这样做，在进行jQuery元素选择时，您不必依赖特定的HTML / DOM结构或特定文本。通过以这种方式减少HTML-JS耦合，可以使JS更加适应HTML中的更改。

例如，试试这个HTML：

<!-- Add id attribute to <select> element and value attributes to its child <option> elements -->
<select id="priceSelect">
    <option value="0">no price</option>
    <option value="1">with price</option>
</select>

<!-- Add value attributes to the radio buttons -->
<ul class="list-inline">
    <li>
        <label id="ribbonPop">
          <input type="radio" name="yesno" value="1"> Yes
        </label>
    </li>
    <li>
        <label id="ribbonNoPop">
           <input type="radio" name="yesno" value="0"> No
        </label>
    </li>
</ul>

与此（较少耦合）JS：

// Cache optimized jQuery object for target <option> element
// so that it does not have to be newly found after each click event
var $withPriceOption = $("#priceSelect").find("[value=1]");

// Initialize click event handler
$("[name=yesno][value=1]").click(function () {
    $withPriceOption.attr("selected", true);
});

Answer 4

你需要包装你的文字＆＃34;是＆＃34;和＆＃34;不＆＃34;内跨度。这是怎么做的

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-inline">
  <li>
    <label id="ribbonPop">
      <input type="radio" name="yesno"> <span>Yes</span>
    </label>
  </li>
  <li>
    <label id="ribbonNoPop">
      <input type="radio" name="yesno"> <span>No</span>
    </label>
  </li>
</ul>



<select>
  <option>no price</option>
  <option>with price</option>
</select>

＆＃13;

{{1}}

＆＃13;

jQuery：如何在单选按钮中单击是时在下拉列表中设置特定值选择

4 个答案: