書簽-從下拉列表中強制選擇

Question

我有一個網頁，我想用一個書簽使它自動化。

它具有一個下拉菜單，允許用戶選擇時間范圍類型：分鍾，小時，天。 我想在小書簽代碼中選擇“天數”，但我不知道如何在剔除中使用這些data-bind屬性：

HTML看起來像這樣：

<span class="btn-group">
    <button class="dropdown-toggle" tabindex="-1" data-bind="disable: settings.disabled">
        <span data-bind="text: settings.offsetUnits">Days</span>
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" data-bind="foreach: settings.offsetUnitsChoices">
        <li><a tabindex="-1" href="#" data-bind="text: $data, click: $parent.selectUnits">Minutes</a></li>

        <li><a tabindex="-1" href="#" data-bind="text: $data, click: $parent.selectUnits">Hours</a></li>

        <li><a tabindex="-1" href="#" data-bind="text: $data, click: $parent.selectUnits">Days</a></li>
    </ul>
</span>

Answer 1

如果在列表中的元素上觸發jquery click事件，則要選擇它，將觸發$ parent.selectUnits函數，該函數應選擇該元素。 請參閱下面的示例。

$('ul > li:nth-child(6) > a').click()

 var pageViewModel = { selectUnits: function(itemClicked) { alert(`You selected ${itemClicked}`); pageViewModel.settings.offsetUnits(itemClicked); }, settings: { offsetUnits: ko.observable(0), offsetUnitsChoices: [5, 15, 30, 45] } }; ko.applyBindings(pageViewModel); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <span class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span data-bind="text: `${settings.offsetUnits()} Units`"></span> <span class="caret"></span> </button> <ul class="dropdown-menu" data-bind="foreach: settings.offsetUnitsChoices"> <li><a href="#" data-bind="text: `${$data} Minutes`, click: $parent.selectUnits"></a></li> <li><a href="#" data-bind="text: `${$data} Hours`, click: $parent.selectUnits"></a></li> <li><a href="#" data-bind="text: `${$data} Days`, click: $parent.selectUnits"></a></li> </ul> </span> <a href="javascript:$('ul > li:nth-child(6) > a').click()">My bookmark to select the 6th item in the dropdown</a>