Question

I have 2 select boxes. One have attribute "data-typdv". I need get number from attribute from currently selected option and select the same value in second dropdown. I cant get it work in last few days. Can someone please help me, what I doing wrong? Thanks.

$(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>

Answer 1

Just use n2.value = myvalue This will normaly work, because myvalue is already the value of the attr 'data-typdv'

Answer 2

Check the ID
Use $("option:selected",this) to get selected option

$(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>

Answer 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>

Answer 4

Just change the id #x1_field_skrinka to #box1 and remove extra ) from here .attr('data-typdv')) and replace var n2 = document.getElementById('x1_typdv2'); n2.value = myvalue.value; with $("#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>

Answer 5

Instead of attr(), use JQuery data() to achieve this.

$(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>

Answer 6

Can you please explain what would you to do. To get the selected item number in the first select field use this

var myvalue = $("#box1 :selected").attr('data-typdv');

There you get the number associated to the selected item. Once you get this what would you do ? Can you explain more??

Select option by attributte of another select with jQuery

6 个答案: