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>

如果没有选择选项，如何隐藏按钮？（我的意思是，如果没有选择，我想隐藏“锚点”按钮）

预先感谢

Answer 1

您只需要在option下拉列表中添加空白值select并在代码中添加条件

if(!name){
  link.style.display = 'none';
}

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;
  if (!name) {
    link.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 value=''>--select--</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">
<a id="data-url" name="data-url">Anchor</a>

Answer 2

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

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/>

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

2 个答案: