Question

<option value=1 id="firstOption">First Option Text</option>
<option value=2 id="secondOption">Second Option Text</option>
<option value=2 selected id="thirdOption">Thrid Option Text</option>

我有两个按钮，应在其上触发选项的单击更改，但是由于选项可能具有相同的值，因此无法正常工作。任何想法如何触发正确的选项，也许通过使用它的ID？我可以通过使用类似以下内容的方法来获取所选选项的ID：

 $('.select-change').click(function () {

            if ($.trim($(this).text()) === 'First Option Text') {
            var firstId = $('select').find('option').filter(function () { 
            return $.trim($(this).text()) === 'First Option Text'; }).attr('id');

... 但似乎无法通过id（

Answer 1

在这里尝试一下，如果它具有相同的值，我可以进行一些更改以触发选项，

for x in file:
    something()

SELECT CASE WHEN SUM(Amount) > 0  
                THEN CONCAT(SUM(Amount) , ' Cr') 
            WHEN SUM(Amount) < 0  
                THEN CONCAT(ABS(SUM(Amount)), ' Dr') 
            ELSE '0.00'
       END 
FROM  amount_transactions 
WHERE Account_ID = 1 ;

Answer 2

从各种jQuery选择器中，您都可以按其ID或文本查找选项，然后按prop进行选择。

function selectOptionById(id) {
    $('select option#' + id + '').prop('selected', true);
}
function selectOptionByText(text) {
    $('select option:contains(' + text + ')').prop('selected', true);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value=1 id="firstOption">First Option Text</option>
  <option value=2 id="secondOption">Second Option Text</option>
  <option value=2 selected id="thirdOption">Thrid Option Text</option>
</select>
<input type="button" value="Select First Option By Text" onclick="selectOptionByText('First Option Text')">
<input type="button" value="Select Third Option By Id" onclick="selectOptionById('thirdOption')">

Answer 3

HTMLSelectElement界面中有几个属性，可用于设置/获取<option>数据。

.options属性：访问<select>的{{3}}

HTMLOptionsCollection属性：用于设置/获取所选<option>的索引号

演示

// This determines what <option> will be selected by index
var idx = 4;

function autoSelect(e) {
  this.selectedIndex = idx;
  const data = `Option ID: ${this.options[idx].id} | Value: ${this.value} | Text: ${this.options[idx].text}`;
  console.log(data);
  return data;
}

/* This is a delegated click event by the .on() method chained
|| to the .trigger method set to fire a click event
|| So upon pageload, the <select> will be triggered to auto click...
|| and invoke callback autoSelect() which will set the selected...
|| index to whatever idx is...
|| It will return a string that contaians the selected...
|| <option>'s id, value, and text.
*/
$('#selA').on('click', autoSelect).trigger('click');

<select id='selA'>
  <option id='0'></option>
  <option value='1' id="1">First</option>
  <option value='2' id="2">Second</option>
  <option value='2' id="3">Thrid</option>
  <option value='1' id="4">Fourth</option>
  <option value='2' id='5'>Fifth</option>
</select>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

当选项可以具有相同的值时，如何触发下拉菜单中的选项更改？

3 个答案:

演示