javascript - 获取动态选择选项的值

Question

我有多个选择选项，每当我更改选择选项时，我都想做，输入字段将填充我选择选项的数据位置

这几个动态选择选项

$(function() {
	    // Remove button click
	    $(document).on(
	        'click',
	        '[data-role="dynamic-fields"] > .form-inline [data-role="remove"]',
	        function(e) {
	            e.preventDefault();
	            $(this).closest('.form-inline').remove();
	        }
	    );
	    // Add button click
	    $(document).on(
	        'click',
	        '[data-role="dynamic-fields"] > .form-inline [data-role="add"]',
	        function(e) {
	            e.preventDefault();
	            var container = $(this).closest('[data-role="dynamic-fields"]');
	            new_field_group = container.children().filter('.form-inline:first-child').clone();
	            new_field_group.find('input').each(function(){
	                $(this).val('');
	            });
	            container.append(new_field_group);
	        }
	    );

	});

$('.id_penumpang').on('change',function(){
  value = $(this).attr("data-id")
  place = $(this).find(':selected').attr('data-place')
  console.log(place)
})

[data-role="dynamic-fields"] > .form-inline + .form-inline {
	    margin-top: 0.5em;
	}

	[data-role="dynamic-fields"] > .form-inline [data-role="add"] {
	    display: none;
	}

	[data-role="dynamic-fields"] > .form-inline:last-child [data-role="add"] {
	    display: inline-block;
	}

	[data-role="dynamic-fields"] > .form-inline:last-child [data-role="remove"] {
	    display: none;
	}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div data-role="dynamic-fields">
<!-- /div.form-inline -->
<div class="form-inline">
<div class="form-group">
	<select required="" class="form-control tink id_penumpang" name="id_penumpang[]" id="id_penumpang"><option value="110" data-id="110" data-place="Ds. Supono No. 929">Elvina Maryadi</option><option value="130" data-id="130" data-place="Ds. Wahidin No. 679">Carla Irawan</option><option value="131" data-id="131" data-place="Jln. Perintis Kemerdekaan No. 903">Cinta Putra</option><option value="150" data-id="150" data-place="Jr. Reksoninten No. 355">Dewi Gunarto</option><option value="157" data-id="157" data-place="Ds. Pasir Koja No. 481">Harjasa Adriansyah</option><option value="161" data-id="161" data-place="Jr. Sukabumi No. 142">Darsirah Laksita</option><option value="166" data-id="166" data-place="Ki. Abdul No. 288">Ellis Wijaya</option><option value="168" data-id="168" data-place="Kpg. Bakaru No. 622">Syahrini Mandasari</option><option value="171" data-id="171" data-place="Psr. Babakan No. 763">Harjo Farida</option><option value="183" data-id="183" data-place="Ki. Bass No. 823">Gabriella Namaga</option><option value="186" data-id="186" data-place="Ki. Soekarno Hatta No. 617">Shakila Mustofa</option><option value="187" data-id="187" data-place="Ki. Bakit  No. 674">Rini Suryatmi</option><option value="189" data-id="189" data-place="Gg. Laksamana No. 672">Bahuraksa Usamah</option><option value="193" data-id="193" data-place="Ds. Basoka Raya No. 64">Fitriani Padmasari</option></select>
</div>
<span>-</span>
<div class="form-group info-alamat">
    <input required="" type="text" name="alamat[]" class="form-control" id="field-value" placeholder="Ketik alamat penumpang ...">
</div>
<button class="btn btn-danger" data-role="remove">
    remove</span>
</button>
<button class="btn btn-primary" data-role="add">
    add</span>
</button>
</div></div>

如何将我的数据位置放置到我的输入字段中？

谁能给我一个解决方案我应该改变什么以便我创建的代码有效？

标签： javascriptjqueryhtml

Answer 1

注意：这只是该方法的一个基本示例

我可以为您提供您正在寻找的方法的基本示例：http: //jsfiddle.net/rg3ovpq5/

基本上，当您更改 中的选定项option时select，您的输入将具有选项的data-place值

HTML：

<select id="select">
  <option data-place="option 1">Option 1</option>
  <option data-place="option 2">Option 2</option>
  <option data-place="option 3">Option 3</option>
</select>

<input type="text" name="result">

查询：

$('body').on('change', '#select', function(){
    $('[name="result"]').val($('#select option:selected').data("place"));
});

$('body').on('change', '#select', function(){
        $('[name="result"]').val($('#select option:selected').data("place"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select">
  <option data-place="option 1">Option 1</option>
  <option data-place="option 2">Option 2</option>
  <option data-place="option 3">Option 3</option>
</select>

<input type="text" name="result">