Question

我对JQuery还是很陌生，在工作示例中似乎更好地理解了。我想建立一个可以定制家具的系统。我有代码交换的图像部分，但它限制了我每页只能使用一个选项。有什么办法可以隐藏根据他们在第一个框中选择的内容的下拉列表。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select onchange="$('#imageToSwap').attr('src', this.options[this.selectedIndex].value);">
    <option value="https://www.humanscale.com/ImagesConfig/S111BM10W101------_2_212x336.png" selected>With arm rests</option>
    <option value="https://www.humanscale.com/ImagesConfig/S110BM10W101------_2_212x336.png">Arm Less</option>
</select>
<img id="imageToSwap" class="profile" src="https://www.humanscale.com/ImagesConfig/S111BM10W101------_2_212x336.png">

这是第一个更改图片的框。该代码应更改带有扶手的椅子和椅子的颜色。

但是另一个无臂下拉框可以覆盖该图像。

下面是无臂代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select onchange="$('#imageToSwap').attr('src', this.options[this.selectedIndex].value);">
  <option value="https://www.humanscale.com/ImagesConfig/S110BM10W101------_2_212x336.png" selected>Black</option>
  <option value="https://www.humanscale.com/ImagesConfig/S110BM10W507------_2_212x336.png">Navy</option>
  <option value="https://www.humanscale.com/ImagesConfig/S110BM10W415------_2_212x336.png">Sage</option>
</select>

无论如何，如果希望选择扶手，我希望显示一个下拉菜单，如果没有，则希望显示一个下拉菜单。并非同时使用它们。

所有帮助将不胜感激！

谢谢

Answer 1

您可以做的是通过选择单选按钮来选择是否显示扶手，然后根据无线电值显示一组选择（用扶手上色/彩色+无扶手）。

$(document).ready(function() {

  var base = "";
  var checkedVal = $("#chair").find("input[name=arms]:checked").val();
  $("input[type='radio']").change(function() {
    var sel = $("input[name='arms']:checked").val();

    base = "https://www.humanscale.com/ImagesConfig";
    var baseext = "";
    if (sel == "1") {
      baseext = "/S111";
    } else {
      baseext = "/S110";
    }
    
    $('#colours option').remove()
    $("#colours").append('<option value=' + base + baseext + 'BM10W101------_2_212x336.png">Black</option>')
    $("#colours").append('<option value=' + base + baseext + 'BM10W507------_2_212x336.png">Navy</option>')
    $("#colours").append('<option value=' + base + baseext + 'BM10W415------_2_212x336.png">Sage</option>')
    });
  
});

input {
  display: inline-block;
  vertical-align: top;
}

select {
  vertical-align: top;
}

#imageToSwap{
display:block;
margin-top:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="chair">
  <input type="radio" name="arms" value="1" checked> With Armrests<br>
  <input type="radio" name="arms" value="2"> Armless
</form>
<br>


<select id="colours" onchange="$('#imageToSwap').attr('src', this.options[this.selectedIndex].value);">
</select>


<img id="imageToSwap" class="profile" src="https://www.humanscale.com/ImagesConfig/S111BM10W101------_2_212x336.png">

祝你好运！

与其他图片交换

1 个答案: