如果值与组标签匹配,请选择下拉列表项?

时间:2018-03-24 20:51:39

标签: javascript jquery

我想添加一个动态函数,如果/与任何与输入字段标签匹配的值,将自动选择下拉列表?

在下面的摘录中,应选择产品代码(因为标签为IS 产品代码



<div class="col-sm-12 col-md-4">
  <div class="form-group">
    <label for="">Product Code</label> <select id="ddlProductCode"
    class="form-control input-sm">
      <option value="0">
        --Select--
      </option>
      <option value="Product Code">
        Product Code
      </option>
      <option value="Product Name">
        Product Name
      </option>
      <option value="Product Description">
        Product Description
      </option>
      <option value="Product Category">
        Product Category
      </option>
      <option value="Product Sub Category">
        Product Sub Category
      </option>
     
    </select>
  </div>
</div>
&#13;
&#13;
&#13;

非常感谢提前! DAV

5 个答案:

答案 0 :(得分:1)

如果我理解正确,这将有所帮助:

$(function() {
    var $ddlProductCode = $('#ddlProductCode');
    var labelValue = $select.prevAll("label:first").text();
    $select.val(labelValue);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-12 col-md-4">
  <div class="form-group">
    <label for="">Product Code</label> <select id="ddlProductCode"
    class="form-control input-sm">
      <option value="0">
        --Select--
      </option>
      <option id="asd" value="Product Code">
        Product Code
      </option>
      <option value="Product Name">
        Product Name
      </option>
      <option value="Product Description">
        Product Description
      </option>
      <option value="Product Category">
        Product Category
      </option>
      <option value="Product Sub Category">
        Product Sub Category
      </option>
     
    </select>
  </div>
</div>

答案 1 :(得分:0)

您可以遍历每个选项并选择与标签文本匹配的选项,如下所示:

$('option').each(function(i, option) {
    if ( option.value == $('label').text() ) {
        option.selected = "selected";
    }
});

答案 2 :(得分:0)

检查将根据标签文本

选择值的jquery

$('#ddlProductCode option:contains(' + $('#lbl').text() +')').each(function(){
    if ($(this).val() == $('#lbl').text()) {
        $(this).attr('selected', true);
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-12 col-md-4">
  <div class="form-group">
    <label id="lbl" for="">Product Code</label> <select id="ddlProductCode"
    class="form-control input-sm">
      <option value="0">
        --Select--
      </option>
      <option value="Product Code">
        Product Code
      </option>
      <option value="Product Name">
        Product Name
      </option>
      <option value="Product Description">
        Product Description
      </option>
      <option value="Product Category">
        Product Category
      </option>
      <option value="Product Sub Category">
        Product Sub Category
      </option>
     
    </select>
  </div>
</div>

答案 3 :(得分:0)

for (i = 0; i < yourselect.length; ++i) {
            if (yourselect.options[i].value == yourvalue) {
                yourselect.value = yourvalue;
            }
        }

答案 4 :(得分:0)

不幸的是,这不是你应该使用<label>标签的方式。

  

HTML元素表示用户中项目的标题   接口。 - Mozilla docs

所以,<label>并不意味着价值应该是什么 如果您想设置默认值,只需将selected添加到<option>

我不完全确定你为什么会这样做,所以也许我会误解,但回答你的问题,你可以根据标签名称设置<option>

无需循环选项:

$('#ddlProductCode').val($('label').text())