从菜单中下拉空选择

Question

I work with a JavaScript app and populate the drop-down menu with a JSON list.

                        $("#address").append($('<option></option>').attr("value", "1").text(""));
                        $.each(wallets, function (index, wallet) {

                            if (selectedCurrency === wallet["currency"].toString().trim()) {
                                $("#address").append($('<option></option>').attr("value", "1").text(wallet["address"]));
                            }
                        })

The UI looks like this,

If I select the empty item (like in the picture), I would like to print empty in the console. Otherwise, I want to print the address value. My intention is to write more code, but, this is where I would like to get started. The code I have,

$("#address").change(function () {

        if($(this).val()===""){
            console.log('empty');
        }

        else{
            console.log($(this).val());
        }
}

However, it only prints 1 in the console and can't distinguish between the empty bar and the address in concern. If I use console.log("The value is " + $(this).text()); inside the change function, it prints every info all together in the console,

The value is mp51mPC38Wtcmybdyd9MPEB2bKnw6eYbCsmqXjM7Mmg6B5LWMad7mHJi339ddaj7xXdBmvXxP1GmXXKojWQJKjgeoASnXVNXCS47z6n41jE2BKKpV6LsPb7dDdStjtuJf1FrYvMMmw1jtrWU5DADxvNR421MKFW1fposgzVMBymnzcZVF4jtZtGAggM5GuLog3Y5o52Mx4xMmq5Rgggfgy2TiRsvtcGm3rxx12R8XbYi9omkdt7ouyJnDXUp4LzdRSRP3ZhU57gUDKy6n2F2QEKk6Fqqk2yMTope5MYp1RtpT949kemrkdfp6qoVN3YiyJhq6nXPvgr3f7YpkS9j

The JSON data I have is something like,

[
  {
    "id": 1,
    "code": "BTC",
    "address": "mp51mPC38Wtcmybdyd9MPEB2bKnw6eYbCs",
    "currency": "Bitcoin"
  },
  {
    "id": 2,
    "code": "BTC",
    "address": "mqXjM7Mmg6B5LWMad7mHJi339ddaj7xXdB",
    "currency": "Bitcoin"
  },
  {
    "id": 4,
    "code": "BTC",
    "address": "mvXxP1GmXXKojWQJKjgeoASnXVNXCS47z6",
    "currency": "Bitcoin"
  }

   // some more data 
]

What the issue here? My guess is I do something wrong to append the data to the drop-down list and needs to be changed.

I can provide more info if required ....

Answer 1

Just change the value 1 to "" in first option.

$("#address").append($('<option></option>').attr("value", "").text(""));

$.each(wallets, function (index, wallet) {
    if (selectedCurrency === wallet["currency"].toString().trim()) {
          $("#address").append($('<option></option>').attr("value", "1").text(wallet["address"]));
      }
});

check this example.

 $("#address").append($('<option></option>').attr("value", "").text("")); $("#address").append($('<option></option>').attr("value", "1").text("123")); $("#address").append($('<option></option>').attr("value", "2").text("456")); $("#address").change(function () { if($(this).val()===""){ console.log('empty'); } else{ console.log($(this).val()); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="address"> </select>