javascript - 根据下拉值字段中的部分值选择下拉列表

Question

我有一种情况，我必须根据查询字符串选择放置值。

查询字符串可能类似于q=c-1 q=c-2 q=p-5

并且下拉菜单中的值可以是value="8-P-5" value="5-G-0" value="7-P-7"

如何根据查询字符串选择下拉值

是否可以通过Code-behind C＃或jquery做到这一点很简单。

<select name="ctl00$ContentPlaceHolder1$ddlOptionGroup" id="ContentPlaceHolder1_ddlOptionGroup" class="form-control">
    <option value="1-C-1">Item 1</option>
    <option value="4-C-2">Item 2</option>
    <option value="5-G-0">Item 3</option>
    <option value="7-P-7">Item 4</option>
    <option value="8-P-5">Item 5</option>
    <option value="10-C-4">Item 6</option>
    <option value="3-P-0">Item 7</option>
    <option value="2-P-0">Item 8</option>
    <option value="6-G-0">Item 9</option>

</select>

如果查询字符串为q=c-2，则应选择<option value="4-C-2" selected>Item 2</option>

Answer 1

如果您愿意使用JavaScript / jQuery解决方案，则可以使用window.location.search，然后使用jQuery选择器根据特定选择标签中基于contains条件的选项。

请注意，这假设q中的值在select元素的value属性中是唯一可识别的。在您当前的数据集中，q=p-0将同时具有项目7和项目8。由于您没有为这种情况提供业务规则，因此我在这里保持不变。

这是演示此内容的代码段：

// use window.location.search
var search = '?q=p-5'; // window.location.search;
// handle possible search for this value ?foo=bar&q=p-5#fragment
var parms = search.substr(1).split('&');
for(var i=0; i< parms.length;i++)
{
  var keyValue= parms[i].split('=');
  if (keyValue[0] === "q" && keyValue.length > 0) {
    var value = keyValue[1].split('#');
    $('select > option[value*="' + value[0].toUpperCase() + '"]').prop('selected',true);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="ctl00$ContentPlaceHolder1$ddlOptionGroup" id="ContentPlaceHolder1_ddlOptionGroup" class="form-control">
    <option value="1-C-1">Item 1</option>
    <option value="4-C-2">Item 2</option>
    <option value="5-G-0">Item 3</option>
    <option value="7-P-7">Item 4</option>
    <option value="8-P-5">Item 5</option>
    <option value="10-C-4">Item 6</option>
    <option value="3-P-0">Item 7</option>
    <option value="2-P-0">Item 8</option>
    <option value="6-G-0">Item 9</option>

</select>