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>

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

任何人都可以给我一个解决方案，我应该更改什么才能使创建的代码起作用？

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

jQuery：

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

获取动态选择选项的值

1 个答案: