Question

我是jquery的新手如何基于第一个选择列表的选定选项更改第二个选择列表选项如果我选择我希望得到的重量我有多个选择列表，它有相同的选项。我试着在片段中但我无法得到输出。我试图获得更接近的选择列表ID并更改其值

＆＃13;

function myfun(selectobj) {
  $('#' + selectid.id).find('.nearSelcttxt').attr(id);
}

＆＃13;

<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>

<header>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</header>
<label class="custom-control "> label1</label>

<div class="col-md-3">
  <select class="labelBlack form-control" name="companyType" id="meas1" class="form-control">
               <option value="Weight"> Weight</option>
	               <option value="Length">Length</option>
	               <option value="Piece"> Piece</option>
            </select>
</div>
<div class="col-md-3">

  <select class="labelBlack form-control" name="companyType" id="unt1" onchange="myfun(this)" required class="form-control nearSelcttxt">
                                 <option value="$/TON">$/TON</option>
	                                 <option value="$/FT">$/FT</option>
	                                 <option value="$/PIECE">$/PIECE</option>
                                </select>

</div>

<label class="custom-control "> label2</label>

<div class="col-md-3">
  <select class="labelBlack form-control" name="companyType" id="meas2" class="form-control">
               <option value="Weight"> Weight</option>
	               <option value="Length">Length</option>
	               <option value="Piece"> Piece</option>
            </select>
</div>

<div class="col-md-3">
  <select class="labelBlack form-control" name="companyType" id="unt2" onchange="myfun(this)" required class="form-control nearSelcttxt">
                                 <option value="$/TON">$/TON</option>
	                                 <option value="$/FT">$/FT</option>
	                                 <option value="$/PIECE">$/PIECE</option>
                                </select>

</div>

＆＃13;

Answer 1

这里你需要维护data-id变量，该变量将整数id存储为为select id指定的yop，例如meas1，unt1所以对于这些选择，对于所有其他选择，它将data-id="1"相同。

对于更改事件，您可以使用onchange内部选择或使用脚本中的全局选择器.change()事件，因为您需要为所有选择使用相同的类名称，例如对于度量选择，您可以使用{ {1}}以及单位使用meas，因此无需在每个选择中使用unt。

注意：您需要保持相同的衡量顺序＆amp;单元。假设权重在度量选择中为0指数，则TON应为0指数。

这将如何运作？ - 首先我们会找到onchange然后我们将获得所选的选项索引。之后，我们会选择data-id，data-id或#meas+data-id。然后我们将从另一个具有新id的选项中获取该索引选项。

#unt+data-id

$(".meas").change(function() {
  var id = $(this).data('id');
  var index = $(this).prop('selectedIndex');
  $("#unt" + id).prop('selectedIndex', index);
});

$(".unt").change(function() {
  var id = $(this).data('id');
  var index = $(this).prop('selectedIndex');
  $("#meas" + id).prop('selectedIndex', index);
});


function changeUnit(element) {
  var id = $(element).data('id');
  var index = $(element).prop('selectedIndex');
  $("#unt" + id).prop('selectedIndex', index);
}

function changeMeasure(element) {
  var id = $(element).data('id');
  var index = $(element).prop('selectedIndex');
  $("#meas" + id).prop('selectedIndex', index);
}

如何根据第一个选择列表的选定选项更改第二个选择列表选项？

1 个答案: