javascript - 如果没有从 document.getElementById .setAttribute href 中选择选项，则隐藏按钮

Question

我有使用 javascript 选择的选项，如果没有选择我想隐藏按钮

这是我的代码:

function updateinput(e) {
 
var selectedOption = e.target.options[e.target.selectedIndex];
var url = selectedOption.getAttribute('data-url');
var name = selectedOption.getAttribute("data-name");
document.getElementById('data1').value = selectedOption.getAttribute('data1');
document.getElementById('data2').value = selectedOption.getAttribute('data2');
document.getElementById('data3').value = selectedOption.getAttribute('data3');
document.getElementById('data4').value = selectedOption.getAttribute('data4');
document.getElementById('data5').value = selectedOption.getAttribute('data5');
document.getElementById('data-url').setAttribute('href', url);
var link = document.getElementById('data-url');
link.href = url;
link.textContent = name;
}

#data-url{
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}

<select onChange="updateinput(event)">
<option data1='1.000.000' data2='0,-' data3='0,-' data4='0,-' data5='1.000.000' data-url='http://google.com' data-name="Google">30 Day</option>
<option data1='1.500.000' data2='500.000,-' data3='0,-' data4='0,-' data5='2.000.000' data-url='http://yahoo.com' data-name="Yahoo">60 Day</option>
</select>

<input id="data1" name="data1" readonly type="text">
<input id="data2" name="data2" readonly type="text">
<input id="data3" name="data3" readonly type="text">
<input id="data4" name="data4" readonly type="text">
<input id="data5" name="data5" readonly type="text">
<a id="data-url" name="data-url">Anchor</a>

如果没有选择选项，如何隐藏按钮？ (我的意思是如果没有选择我想隐藏按钮“ anchor ”)

提前致谢

Answer 1

默认情况下，选择列表的第一个选项将被选中。因此，为了实现您想要的效果，我们可以在列表中添加一个新的默认选项...

function updateinput(e) {
 
var selectedOption = e.target.options[e.target.selectedIndex];
var name = selectedOption.getAttribute("data-name");
var url = selectedOption.getAttribute('data-url');
document.getElementById('data1').value = selectedOption.getAttribute('data1');
document.getElementById('data2').value = selectedOption.getAttribute('data2');
document.getElementById('data3').value = selectedOption.getAttribute('data3');
document.getElementById('data4').value = selectedOption.getAttribute('data4');
document.getElementById('data5').value = selectedOption.getAttribute('data5');
document.getElementById('data-url').setAttribute('href', url);
if(name != 'default')
{
  document.getElementById('url-anchor').style.display = 'block';
  var link = document.getElementById('data-url');
  link.href = url;
  link.textContent = name;
}
else
{
  document.getElementById('url-anchor').style.display = 'none';
}
}

#data-url{
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}

<select onChange="updateinput(event)">
<option data1='' data2='' data3='' data4='' data5='' data-url='' data-name="default">Select period</option>
<option data1='1.000.000' data2='0,-' data3='0,-' data4='0,-' data5='1.000.000' data-url='http://google.com' data-name="Google">30 Day</option>
<option data1='1.500.000' data2='500.000,-' data3='0,-' data4='0,-' data5='2.000.000' data-url='http://yahoo.com' data-name="Yahoo">60 Day</option>
</select>

<input id="data1" name="data1" readonly type="text">
<input id="data2" name="data2" readonly type="text">
<input id="data3" name="data3" readonly type="text">
<input id="data4" name="data4" readonly type="text">
<input id="data5" name="data5" readonly type="text">
<div id="url-anchor" style="display:none"><a id="data-url" name="data-url">Anchor</a><div/>