javascript - 从 checkbox1 中选择项目并从 dropdown1 中选择项目后，结果在 dropdown2 中显示/隐藏选项值

Question

我想从 checkbox1 中选择一个平台并从 dropdown1 中选择值 因此我希望在 dropdown2 中显示与平台相关的值

示例: 我检查 GI 和 90 >> 结果 dropdown2 = 90 gi 如果我检查 GI 和 xdo 190 >> 结果:190 gi 和 190 xdo

并且希望该值出现在文本框“lns”中。

我尝试了一些代码，但无法正常工作:

<script>
$(document).ready(function()
{$('option[id^=sb]').hide();
$('input[id^=chk]').change(function(){
var index = $(this).attr('id').replace('chk','');
if($(this).is(':checked'))
$('#sb'+index).show();
else
$('#sb'+index).hide();
});   });   

$(function(){
$("#dropdown1").on("change",function(){
var levelClass = $('#dropdown1').find('option:selected').attr('class');
console.log(levelClass);
$('#dropdown2 option').each(function () {
var self = $(this);
if (self.hasClass(levelClass) || typeof(levelClass) == "undefined") {
self.show();
} else {
self.hide();
}});   });});

function chlink(){
var dropdown2 = document.getElementById('dropdown2');
var a = dropdown2.options[dropdown1.selectedIndex].value;
var textbox = document.getElementById('lns');
 textbox.value = a; }

任何帮助:)

Answer 1

这应该有效

$(document).ready(function(){
    $('.chlink').on('click', function(){
        gatherValuesFromInputs();
    });
});

function gatherValuesFromInputs() {
    var result = '';
    $('.chk:checked').each(function(index){
    	if(index == 0) {
        	result += $('#dropdown').val() + " " + $(this).val();
        } else {
        	result += ' and ' + $('#dropdown').val() + " " + $(this).val();
        }
    });
    $('#lns').val(result);
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<div class="row">
    <div class="column">
    <div style="float:right">
        <label for="option1">Xdo</label>
        <input class="chk" id="option1" type="checkbox" name="option1" value="xdo">
    </div>
    <div style="float:right">
        <label for="option2">GI</label>
        <input class="chk" id="option2" type="checkbox" name="option2" value="gi">
    </div>
    <div style="float:right">
        <label for="option3">PayF</label>
        <input class="chk" id="option3" type="checkbox" name="option3" value="PayF">
    </div>
    <div style="float:right">
        <label for="option4">HiP</label>
        <input class="chk" id="option3" type="checkbox" name="option4" value="HiP"/>
    </div>
    </div>
</div>

<br>

<select id="dropdown" name="dropdown">
    <option>choisissez un Pack</option>
    <option value="90"> LIEN 90  </option>
    <option value="190"> LIEN 190 </option>
</select>

<br><br>

<button class="chlink">Generer Lien</button>
<p><input name="lns" id="lns" type="text" /></p>