如何使用javascript根据下拉选择（使用外部链接）禁用/启用按钮？

Question

我有一个下拉列表，其中包含一些可供选择的选项，这会导致外部链接。这到目前为止工作正常，但我想在没有选择任何内容时禁用该按钮。作为非开发人员，我还不能把它放在一起。有什么想法吗？

function goToNewPage() {
    if(document.getElementById('target').value){
        window.open(document.getElementById('target').value);
    }
}

<form name="dropdown">
<select name="list" id="target">
<option selected>Please select one</option>
<option value="http://search.msn.com/">MSN Search</option>
<option value="http://www.google.com/">Google</option>
<option value="http://www.search.com/">Search.com</option>
<option value="http://www.dogpile.com/">Dogpile</option>
</select>
<input type=button value="Go" onclick="goToNewPage(document.dropdown.list)" class="gobutton">
</form>

Answer 1

我建议你可以使用：

// binding the anonymous function of the on() method as
// the event-handler for the 'change' event:
$('#target').on('change', function(){

    // finds the next sibling <input> element with the '.gobutton'
    // class-name:
    $(this).next('.gobutton')
      // and sets its 'disabled' property to true if
      // the value of the <select> is equal to the 'Please select one'
      // string:
      .prop('disabled', this.value === 'Please select one');

// triggers the 'change' event on page load in order that the
// anonymous function disables the <input> on page-load:
}).change();

function goToNewPage() {
  if (document.getElementById('target').value) {
    window.open(document.getElementById('target').value);
  }
}
$('#target').on('change', function() {
  $(this).next('.gobutton').prop('disabled', this.value === 'Please select one');
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="dropdown">
  <select name="list" id="target">
    <option selected>Please select one</option>
    <option value="http://search.msn.com/">MSN Search</option>
    <option value="http://www.google.com/">Google</option>
    <option value="http://www.search.com/">Search.com</option>
    <option value="http://www.dogpile.com/">Dogpile</option>
</select>
  <input type=button value="Go" class="gobutton" onclick="goToNewPage(document.dropdown.list)" class="gobutton">
</form>

使用上述方法的另一种方法是，不使用特定值的硬编码，而是依赖defaultValue元素的<select>：

// binding the anonymous function of the on() method as
// the event-handler for the 'change' event:
$('#target').on('change', function(){
    // caching the <option> elements of the <select>
    // element:
    let opts = this.options,

        // finding the index of the currently-selected
        // <option> from the options:
        currentSelected = this.selectedIndex;

    // finding the next <input> sibling, if that
    // <input> sibling has the class-name of
    // 'gobutton':
    $(this).next('.gobutton')
        // setting the disabled property to true if:
        // the currently-selected <option> is the
        // defaultSelected property is true/truthy
        // (this returns Boolean true if the
        // <option> has the 'selected' property or
        // is selected on page-load in the browser:
        .prop('disabled', opts[currentSelected].defaultSelected);

// triggers the 'change' event on page load in order that the
// anonymous function disables the <input> on page-load:
}).change();

function goToNewPage() {
  if (document.getElementById('target').value) {
    window.open(document.getElementById('target').value);
  }
}
$('#target').on('change', function() {
  let opts = this.options,
    currentSelected = this.selectedIndex;
  $(this).next('.gobutton').prop('disabled', opts[currentSelected].defaultSelected);
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="dropdown">
  <select name="list" id="target">
    <option selected>Please select one</option>
    <option value="http://search.msn.com/">MSN Search</option>
    <option value="http://www.google.com/">Google</option>
    <option value="http://www.search.com/">Search.com</option>
    <option value="http://www.dogpile.com/">Dogpile</option>
</select>
  <input type=button value="Go" class="gobutton" onclick="goToNewPage(document.dropdown.list)" class="gobutton">
</form>

值得注意的是，既然您已经使用jQuery标记了这个问题，那么使用jQuery绑定原始函数可能会更容易：

function goToNewPage() {
  window.open(document.getElementById('target').value);
}

// here we bind the goToNewPage() function (note the deliberate
// lack of parentheses, we want to bind the function not the
// return value of the function) as the event-handler for the
// 'click' event:
$('.gobutton').on('click', goToNewPage);

$('#target').on('change', function() {
  let opts = this.options,
    currentSelected = this.selectedIndex;
  $(this).next('.gobutton').prop('disabled', opts[currentSelected].defaultSelected);
}).change();

function goToNewPage() {
  window.open(document.getElementById('target').value);
}

$('.gobutton').on('click', goToNewPage);

$('#target').on('change', function() {
  let opts = this.options,
    currentSelected = this.selectedIndex;
  $(this).next('.gobutton').prop('disabled', opts[currentSelected].defaultSelected);
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="dropdown">
  <select name="list" id="target">
    <option selected>Please select one</option>
    <option value="http://search.msn.com/">MSN Search</option>
    <option value="http://www.google.com/">Google</option>
    <option value="http://www.search.com/">Search.com</option>
    <option value="http://www.dogpile.com/">Dogpile</option>
</select>
  <input type=button value="Go" class="gobutton" class="gobutton">
</form>

使用jQuery（或者通常使用JavaScript）绑定功能的主要好处是它可以从页面中删除突出的JavaScript，并且可以更轻松地将相同的函数绑定到多个元素或从多个元素中删除，而无需浏览HTML以查找相关元素。

但是，如果您不使用JavaScript而不使用其他库，则可以轻松实现上述功能：

// defining variables using the 'const' statement, this
// prevents these variables from being changed elsewhere
// (although new properties can still be assigned to the
// cached variables):
// here we define a new Event that we can listen for later,
// and dispatch on page-load to trigger the method bound
// as the event-handler for that event:
const changeEvent = new Event('change'),

 // because we refer to this node twice it's worth caching
 // to avoid having to look up the element more than once:
      target = document.getElementById('target');

function goToNewPage() {
  window.open(document.getElementById('target').value);
}

// here we use Array.from() to convert the NodeList
// returned by document.querySelectorAll(), which
// finds elements matching the supplied CSS selector,
// in an Array in order to use Array methods (it's worth
// noting that many browsers supply a NodeList.forEach()
// method, but not all do unfortunately):
Array.from(document.querySelectorAll('input.gobutton'))

  // here we use Array.prototype.forEach() (instead of
  // the sometimes present NodeList.prototype.forEach()
  // in order to reduce the chance of errors being thrown)
  // to iterate over each Node in the Array of Nodes:
  .forEach(function(button) {
    // 'button' refers to the current Node of the Array
    // of Nodes over which we're iterating, and here
    // we bind the goToNewPage() function (again: note
    // the deliberate lack of parentheses) as the
    // event-handler of the 'click' event:
    button.addEventListener('click', goToNewPage);
  });

// hwere we use the addEventListener() method to bind the
// anonymous function as the event-handler for the 'change'
// event:
target
  .addEventListener('change', function() {

    // caching the <option> elements:
    let opts = this.options,

    // retrieving the inde of the currently-selected 
    // <option> element's index:
      currentSelected = this.selectedIndex,

    // finding the '.gobutton' element within the same
    // parentNode as the target Node:
      gobutton = this.parentNode.querySelector('.gobutton');

    // if a matching element was found (document.querySelector()
    // returns the first matching element if one, or more, exists
    // or null if no matching element was found):
    if (gobutton) {

      // here we set the disabled property of the gobutton
      // to true if the default-selected <option> is selected,
      // or to false if any other <option> is selected:
      gobutton.disabled = opts[currentSelected].defaultSelected;
    }
  });

  target.dispatchEvent(changeEvent);

const changeEvent = new Event('change'),
      target = document.getElementById('target');
function goToNewPage() {
  window.open(document.getElementById('target').value);
}

Array.from(document.querySelectorAll('input.gobutton'))
  .forEach(function(button) {
    button.addEventListener('click', goToNewPage);
  });

target
  .addEventListener('change', function() {
    let opts = this.options,
      currentSelected = this.selectedIndex,
      gobutton = this.parentNode.querySelector('.gobutton');
    if (gobutton) {
      gobutton.disabled = opts[currentSelected].defaultSelected;
    }
  });
  
  target.dispatchEvent(changeEvent);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="dropdown">
  <select name="list" id="target">
    <option selected>Please select one</option>
    <option value="http://search.msn.com/">MSN Search</option>
    <option value="http://www.google.com/">Google</option>
    <option value="http://www.search.com/">Search.com</option>
    <option value="http://www.dogpile.com/">Dogpile</option>
</select>
  <input type=button value="Go" class="gobutton">
</form>