Question

On a form, I have the following required drop down box:

<select id="SelectBox" name="SelectBox" required>
<option value="">Please Select ...</option>
<option value="val1">val1</option>
<option value="val2">val2</option>
<option value="val3">val3</option>
<option value="val4">val4</option>
</select>

I also have the following textbox:

<input type="text" name="textbox" id="textbox">

I am trying to make the textbox required only if val4 is selected from the dropdown box using the required attribute (red border around textbox). I have done this with a radio button group, but need to do the same with this dropdown box.

Any help would be greatly appreciated. Thanks.

Answer 1

如果您仅从选择框中选择 val4 选项，则此选项可用于生成文本输入属性required并添加一些红色边框。

 var select = document.getElementById("SelectBox");
 var textBoxElement = document.getElementById("textbox");

 select.onchange = function(){

    var selectedString = select.options[select.selectedIndex].value;

    if(selectedString == 'val4'){

       textBoxElement.required = true;
       textBoxElement.style.border="1px solid red";

    }else{

       textBoxElement.required = false;
       textBoxElement.style.border="";
    }   
}

见工作小提琴：https://jsfiddle.net/nwk1tkb7/5/

Answer 2

我建议的一种方法如下：

// use of a named function, to be called via Elememt.addEventListener:
function elementRequiredIf(event) {

  // 'this' will be the <select> element in this example, however
  // the 'this' is automatically passed from Element.addEventListener
  // (as is the 'event' object, though we don't use that here):
  var changed = this,

  // here we find the conditionally-required element, using
  // the id of the element stored in the custom data-* attribute
  // of the <select> element, here we retrieve that attribute-
  // value from the dataset object, stored as a property of the
  // Element:
    requiredElement = document.getElementById(changed.dataset.required_elem_id),

  // as above, we use the same approach to retrieve the
  // value that makes the other element required:
    ifRequiredValueIs = changed.dataset.required_if_value;

  // here we set the required property of the element to
  // true (if the <select> value is equal to the required
  // value, or false if they are unequal:
  requiredElement.required = changed.value === ifRequiredValueIs;
}

// here we find the <select> element via its id,
// and bind an event-listener for the 'change' event,
// which, upon a change event being fired, calls the
// named function (note the deliberate, required, lack
// of parentheses following the function name):
document.getElementById('SelectBox').addEventListener('change', elementRequiredIf);

function elementRequiredIf() {
  var changed = this,
    requiredElement = document.getElementById(changed.dataset.required_elem_id),
    ifRequiredValueIs = changed.dataset.required_if_value;
  requiredElement.required = changed.value === ifRequiredValueIs;
}

document.getElementById('SelectBox').addEventListener('change', elementRequiredIf);

input:required {
  box-shadow: 0 0 0.5em #f00;
}

<form>
  <select id="SelectBox" name="SelectBox" data-required_elem_id="textbox" data-required_if_value="val4" required>
    <option value="">Please Select ...</option>
    <option value="val1">val1</option>
    <option value="val2">val2</option>
    <option value="val3">val3</option>
    <option value="val4">val4</option>
  </select>

  <input type="text" name="textbox" id="textbox">
  <button type="submit">Submit</button>
</form>

JS Fiddle demo

参考文献：

Make textbox required if a certain value is selected in dropdown box

2 个答案: