选择下拉列表的某个元素时，请单击按钮

Question

我正在尝试在选择列表中的某个元素时单击按钮上的文本。对于ex：当从列表中选择元素"地址"时，我想按下按钮并相应地更改文本。下面是我得到的代码，但它不起作用。它只是生成名称而不是地址。

html：

<p id="generated-text">
Waiting... Just select something right here
</p>

  <div class="dropdown">
    <div class="select">
      <span>Select</span>
    </div>
    <input type="hidden">
    <ul class="dropdown-menu">
      <li id="address">Address</li>
      <li id="name">Name</li>
    </ul>
   </div>
   <span class="msg"></span>
  </div>
  <a href="#" id="trigger" onclick="random()" title="Generate new 
  content" class="generate-btn">RANDOMIZE</a>

JS：

 /*Dropdown Menu*/
  $('.dropdown').click(function () {
    $(this).attr('tabindex', 1).focus();
    $(this).toggleClass('active');
    $(this).find('.dropdown-menu').slideToggle(300);
});
$('.dropdown').focusout(function () {
    $(this).removeClass('active');
    $(this).find('.dropdown-menu').slideUp(300);
});
$('.dropdown .dropdown-menu li').click(function () {
    $(this).parents('.dropdown').find('span').text($(this).text());
    $(this).parents('.dropdown').find('input').attr('value', 
$(this).attr('id'));
});
/*End Dropdown Menu*/

  if (document.getElementById("address").selected = true) {

    function random() {
    var address = new Array();
    address[1] = "709 Honey Creek Dr.New York, NY 10028";
    address[2] = "73 Pacific St.Forest Hills, NY 11375";
    address[3] = "812 Thatcher Court Yonkers, NY 10701";
    address[4] = "3 South Sherman Street Astoria, NY 11106";
    address[5] = "15 St Margarets Lane New York, NY 10033";
    var rdmAddresses = Math.floor(Math.random()*address.length);
    $('#generated-text').html(address[rdmAddresses]);

    }
  }

  if (document.getElementById("name").selected = true) {

    function random() {
    var name = new Array();
    name[1] = "Name 1";
    name[2] = "Name 2";
    name[3] = "Name 3";
    name[4] = "Name 4";
    name[5] = "Name 5";
    var rdmNames = Math.floor(Math.random()*name.length);
    $('#generated-text').html(name[rdmNames]);

    }

  }

Answer 1

您的代码有几个问题：

• 这样做，因此仅评估一次

• 值的测试是由==或===(更严格(完成的，=是分配的，因此在您分配的条件下，其结果是您分配的值(在这种情况下为true(

• 您不能具有相同名称的更多功能

• document.getElementById("address")获得的元素没有selected属性(BTW selected是select元素所唯一的；请参阅如何检查选项是否已选择？(

• 即使他们拥有它，您也不会在任何地方分配/更改

我提出了这些更新：

• 介绍一个random函数，该功能将根据所选内容

调用两个随机化器

• 当您已经存储隐藏输入中选择了哪个项目时，将其添加一个ID并在条件下对其值进行测试，而不是与selected属性/attribute

混乱

html更改：

<input id="selected" type="hidden">

JavaScript更改：

function random() {
    var selected = document.getElementById("selected").value;
    console.log('selected:', selected);
    if (selected === 'address')
        randomAddress();
    else if (selected === 'name')
        randomName();
}
function randomAddress() {
    var address = new Array();
    address[1] = "709 Honey Creek Dr.New York, NY 10028";
    address[2] = "73 Pacific St.Forest Hills, NY 11375";
    address[3] = "812 Thatcher Court Yonkers, NY 10701";
    address[4] = "3 South Sherman Street Astoria, NY 11106";
    address[5] = "15 St Margarets Lane New York, NY 10033";
    var rdmAddresses = Math.floor(Math.random()*address.length);
    $('#generated-text').html(address[rdmAddresses]);
}
function randomName() {
    var name = new Array();
    name[1] = "Name 1";
    name[2] = "Name 2";
    name[3] = "Name 3";
    name[4] = "Name 4";
    name[5] = "Name 5";
    var rdmNames = Math.floor(Math.random()*name.length);
    $('#generated-text').html(name[rdmNames]);
}

最好只返回从随机化器中返回一个由此产生的字符串，然后在random()函数内分配#generated-text的HTML，这样您就可以在一个位置上与元素连接的逻辑(即，通过散布在散布的侧面效应较小编码更好(：

function random() {
    var selected = document.getElementById("selected").value;
    var text = 'nothing selected';
    if (selected === 'address')
        text = getRandomAddress();
    else if (selected === 'name')
        text = getRandomName();
    $('#generated-text').html(text);
}
function getRandromAddress() {
    //...
    //$('#generated-text').html(name[rdmNames]);
    return name[rdmNames];
}