Question

我正在努力完成以下事项....

创建一个下拉菜单，其中包含姓氏
选择姓氏后，显示所有姓氏为

...尝试

＆＃13;

OAuth10aService service = new ServiceBuilder()
    .apiKey("44a4f9c1a9daa88f4da2")
    .apiSecret("2fc8ca373dab772acc4de7ce22718f8fced6919c")
    .callback("https://redirect.example.com")
    .build(XingApi.instance());

final Token requestToken = service.getRequestToken();

System.out.println(service.getAuthorizationUrl(requestToken));
System.out.println("Paste the verifier here");
System.out.print(">>");
Scanner in = new Scanner(System.in);
Verifier verifier = new Verifier(in.nextLine());
System.out.println();
in.close();

// Trade the Request Token and Verfier for the Access Token
Token accessToken = service.getAccessToken(requestToken, verifier);
System.out.println("Got the Access Token! " + accessToken);

＆＃13;

我需要帮助的是将下拉选项中继到javascript函数，以便我可以在数组之间切换。

谢谢！

Answer 1

使用change事件来捕获您选择的更改，并使用相关数组将li项添加到目标ul到所选值。

注意：在下面的示例中使用window[string]从string获取变量名称（选定的选项值）。

var smith = ["text instead of Smith pictures","text instead of Smith pictures2"];
var jones = ["text instead of Jones pictures"];

$('select').on('change', function(){
    $('ul').empty(); //reset ul
  
    var selected_array = window[$(this).val()];

    for (i=0;i<selected_array.length;i++) {
      $('ul').append("<li><p>" + selected_array[i] + "<p/></li>");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="smith">Smith</option>
  <option value="jones">Jones</option>
</select> 
<div>
  <ul></ul>
</div>

Answer 2

javascript中的所有方法都可以是：

＆＃13;

function displayAllImages(ele) {
  var smith = ["text instead of Smith pictures","text instead of Smith pictures2"];
  var jones = ["text instead of Jones pictures"];

  var obj = jones;
  var target = document.getElementsByClassName('target')[0];
  target.innerHTML = '';
  if (ele.selectedOptions[0].value == 'smith') {
    obj = smith;
  }
  obj.forEach(function(currValue, index, arr) {
    target.innerHTML += "<li><p>" + currValue + "</p></li>";
  });
};
window.onload = function(e) {
  displayAllImages(document.getElementById('selectBox'));
}

＆＃13;

<select id="selectBox" onchange="displayAllImages(this);">
    <option value="smith">Smith</option>
    <option value="jones">Jones</option>
</select>
<div>
    <ul class='target'>
    </ul>
</div>

＆＃13;

Answer 3

＆＃13;

var arrAllImages = [];
arrAllImages["smith"] =
        [
            "http://www.letsgodigital.org/images/producten/3376/pictures/canon-eos-sample-photo.jpg",
            "http://farm7.static.flickr.com/6050/6287299751_395316b6cd_z.jpg",
            "https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Sample-image.svg/703px-Sample-image.svg.png"
        ];
arrAllImages["jones"] =
        [
            "http://yesyoucanbuythat.com/store/resources/image/18/7a/f.png",
            "http://www.claridgeupholstery.com/images/samples/Beige.jpg",
            "http://www.quality-wars.com/wp-content/uploads/2009/10/gold_standard_main.jpg"
        ];
function displayUserImages() {
    $("li").remove();
    var strUserName = $("select").val();
    $.each(arrAllImages[strUserName], function () {
        $("<li><img src='" + this + "'/></li>").appendTo("ul");
    });
}
$(document).ready(function () {
    displayUserImages();

    $("select").change(function () {
        displayUserImages();
    });
})

＆＃13;

li
{
    list-style: none ;
    display: inline
}
li img{
    height: 150px;
    width: 150px;
    margin-right: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <select>
        <option value="smith">Smith</option>
        <option value="jones">Jones</option>
    </select>
    <div>
        <ul></ul>
    </div>
</body>

＆＃13;

根据选择显示图像阵列

3 个答案: