【问题标题】：Select option by attributte of another select with jQuery使用 jQuery 按另一个选择的属性选择选项
【发布时间】：2017-12-16 12:52:21
【问题描述】：
我有 2 个选择框。一个具有属性“data-typdv”。我需要从当前选定选项的属性中获取数字，并在第二个下拉列表中选择相同的值。最近几天我无法让它工作。有人可以帮助我，我做错了什么吗？谢谢。
$(document).ready(function() {
$("#x1_field_skrinka").change(function() {
var myvalue = $("#x1_field_skrinka option:selected").attr('data-typdv')),
var n2 = document.getElementById('x1_typdv2'); n2.value = myvalue.value;
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Get "data-typdv" attribute from this: <br>
<select id="box1" name="box1">
<option value="a" data-typdv="0"></option>
<option value="b" data-typdv="1">Val 1</option>
<option value="c" data-typdv="2">Val 2</option>
<option value="d" data-typdv="3">Val 3</option>
<option value="e" data-typdv="4">Val 4</option>
<option value="f" data-typdv="5">Val 5</option>
<option value="g" data-typdv="6">Val 6</option>
</select>
<br> and select value with the same number here:
<br>
<select id="box2" name="box2">
<option value="0"></option>
<option value="1">Val 1</option>
<option value="2">Val 2</option>
<option value="3">Val 3</option>
<option value="4">Val 4</option>
<option value="5">Val 5</option>
<option value="6">Val 6</option>
</select>
【问题讨论】：
标签：
jquery
select
dropdown
option
【解决方案1】：
只需使用 n2.value = myvalue 这将正常工作，因为 myvalue 已经是 attr 'data-typdv' 的值
【解决方案2】：
- 检查
ID
- 使用
$("option:selected",this) 获取选定选项
$(document).ready(function() {
$("#box1").change(function() {// put the correct ID
var myvalue = $("option:selected", this).attr('data-typdv')
$("#box2").val(myvalue)// put the correct ID
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Get "data-typdv" attribute from this: <br>
<select id="box1" name="box1">
<option value="a" data-typdv="0"></option>
<option value="b" data-typdv="1">Val 1</option>
<option value="c" data-typdv="2">Val 2</option>
<option value="d" data-typdv="3">Val 3</option>
<option value="e" data-typdv="4">Val 4</option>
<option value="f" data-typdv="5">Val 5</option>
<option value="g" data-typdv="6">Val 6</option>
</select>
<br> and select value with the same number here:
<br>
<select id="box2" name="box2">
<option value="0"></option>
<option value="1">Val 1</option>
<option value="2">Val 2</option>
<option value="3">Val 3</option>
<option value="4">Val 4</option>
<option value="5">Val 5</option>
<option value="6">Val 6</option>
</select>
【解决方案3】：
$(document).ready(function() {
$("#box1").change(function() {
var myvalue = $("#box1 option:selected").attr('data-typdv');
$("#box2").val(myvalue);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Get "data-typdv" attribute from this: <br>
<select id="box1" name="box1">
<option value="a" data-typdv="0"></option>
<option value="b" data-typdv="1">Val 1</option>
<option value="c" data-typdv="2">Val 2</option>
<option value="d" data-typdv="3">Val 3</option>
<option value="e" data-typdv="4">Val 4</option>
<option value="f" data-typdv="5">Val 5</option>
<option value="g" data-typdv="6">Val 6</option>
</select>
<br> and select value with the same number here:
<br>
<select id="box2" name="box2">
<option value="0"></option>
<option value="1">Val 1</option>
<option value="2">Val 2</option>
<option value="3">Val 3</option>
<option value="4">Val 4</option>
<option value="5">Val 5</option>
<option value="6">Val 6</option>
</select>
【解决方案4】：
只需将 ID #x1_field_skrinka 更改为 #box1 并从此处删除多余的 ) .attr('data-typdv'))
并将var n2 = document.getElementById('x1_typdv2'); n2.value = myvalue.value; 替换为$("#box2").val(myvalue);
$(document).ready(function() {
$("#box1").change(function() {
var myvalue = $("#box1 option:selected").attr('data-typdv');
$("#box2").val(myvalue);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Get "data-typdv" attribute from this: <br>
<select id="box1" name="box1">
<option value="a" data-typdv="0"></option>
<option value="b" data-typdv="1">Val 1</option>
<option value="c" data-typdv="2">Val 2</option>
<option value="d" data-typdv="3">Val 3</option>
<option value="e" data-typdv="4">Val 4</option>
<option value="f" data-typdv="5">Val 5</option>
<option value="g" data-typdv="6">Val 6</option>
</select>
<br> and select value with the same number here:
<br>
<select id="box2" name="box2">
<option value="0"></option>
<option value="1">Val 1</option>
<option value="2">Val 2</option>
<option value="3">Val 3</option>
<option value="4">Val 4</option>
<option value="5">Val 5</option>
<option value="6">Val 6</option>
</select>
【解决方案5】：
代替attr()，使用JQuery data() 来实现。
$(document).ready(function() {
$("#box1").change(function() {
$("#box2").val($("option:selected", this).data('typdv'))
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Get "data-typdv" attribute from this: <br>
<select id="box1" name="box1">
<option value="a" data-typdv="0"></option>
<option value="b" data-typdv="1">Val 1</option>
<option value="c" data-typdv="2">Val 2</option>
<option value="d" data-typdv="3">Val 3</option>
<option value="e" data-typdv="4">Val 4</option>
<option value="f" data-typdv="5">Val 5</option>
<option value="g" data-typdv="6">Val 6</option>
</select>
<br> and select value with the same number here:
<br>
<select id="box2" name="box2">
<option value="0"></option>
<option value="1">Val 1</option>
<option value="2">Val 2</option>
<option value="3">Val 3</option>
<option value="4">Val 4</option>
<option value="5">Val 5</option>
<option value="6">Val 6</option>
</select>
【解决方案6】：
你能解释一下你会做什么吗？
要在第一个选择字段中获取所选项目编号，请使用此
var myvalue = $("#box1 :selected").attr('data-typdv');
您会在此处获得与所选项目关联的数字。
一旦你得到这个你会怎么做？
能多解释一下吗？