Question

我有一个代码，下拉列表工作正常...但是我希望在文本框中键入的文本在结果中的$ s =之后输出，这是所使用的代码

$("#month, #color").change(function() {
  var month = $("#month").val();
  var color = $("#color").val();
  var content = '';
  if (month && color) {
    var monthlabel = $("label[for=" + month + "]").text();
    var colorlabel = $("label[for=" + color + "]").text();
    content = ' ' + monthlabel + '' + colorlabel + '&s=';
  }
  $("#output").text(content).fadeIn();
});

body {
  margin: 10px;
}

form {
  margin: 0px auto;
  width: 370px;
}

p {
  font-family: 'Roboto', sans-serif;
  font-size: 13px/18px;
  font-weight: 300;
  padding: 10px 0px;
  text-align: center;
}

.output {
  color: #000;
  font-family: 'Roboto', sans-serif;
  font-size: 13px/20px;
  font-style: normal;
  font-weight: 100;
  text-align: center;
}

h2 {
  color: #009CDC;
  font-family: 'Roboto', sans-serif;
  font-size: 2.5em;
  font-style: normal;
  font-weight: 100;
  line-height: 1.17em;
  text-align: center;
}

input {
  display: true;
  margin-bottom: 10px;
}

label {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h2>test header</h2>

<p>blahblah.</p>

<form>
  <select id="month">
    <option value="caeqweqwm1">Select NUMBER</option>
    <option value="1"> 1</option>
    <option value="2"> 2</option>
    <option value="3"> 3</option>
    <option value="4"> 4</option>
    <option value="5">5</option>

  </select>
  <label class="1" for="1">/bookmark1.php?f=</label>
  <label class="2" for="2">/bookmark2.php?f=</label>
  <label class="3" for="3">/bookmark3.php?f=</label>
  <label class="4" for="4">/bookmark4.php?f=</label>
  <label class="5" for="5">/bookmark5.php?f=</label>



  <select id="color">
    <option value="qwq">Select Date</option>
    <option value="6-28-18">6-28-18</option>
    <option value="6-29-18">6-29-18</option>
    <option value="6-30-18">6-30-18</option>
    <option value="7-1-18">7-1-18</option>

  </select>
  <label class="6-28-18" for="6-28-18">062818xdasddA</label>
  <label class="6-29-18" for="6-29-18">062918x31ewqeqwe</label>
  <label class="6-30-18" for="6-30-18">063018x3123233</label>
  <label class="7-1-18" for="7-1-18">070118x23232</label>
  <input name="formtext1" type="text">
  <p id="output"></p>

Answer 1

您无需考虑输入的更改或读取其值。 $("#month, #color")-> $("#month, #color, input[name='formtext1'")
输入值：$("[name='formtext1']").val();

http://jsfiddle.net/ygz32s0u/7/

另一种选择是在输入中添加一个ID，以进行更精确的选择： http://jsfiddle.net/ygz32s0u/13/

Answer 2

全部披露：我不是JQuery的用户。如果我必须这样做，那么（也许）这就是我要用手写ES5做到的方式。请注意，我们正在关注的事件侦听器是“输入”而不是“更改”，因为它似乎对所有涉及的输入都更好。

整个处理程序都封装在一个函数中，以避免与函数外部的JS冲突。我还将您的“ SELECT any any”选项的值更改为一个空字符串，以测试错误的输入值。

function fieldChangeHandler(){ 
  var values = {
    month: '',
    color: '',
    search: ''
  }
  
  var output = document.getElementById('output');
  
  function outputString(){
    output.innerHTML = values.month + values.color + values.search;
  }
  
  function updateValue(e) {
    switch(e.target.id) {
      case 'search':
        values[e.target.id] = e.target.value ? 
          '&s='+encodeURI(e.target.value) : '';
        break;
      default:
        values[e.target.id] = e.target.value ? 
          document.querySelector('label[for="'+e.target.value+'"]').innerHTML : '';
    }
    outputString();
  }

  var inputs = document.querySelectorAll('.form_field');
  inputs = Array.prototype.slice.call(inputs);
  inputs.forEach(function(input){
    input.addEventListener('input', updateValue);
  });

}

fieldChangeHandler();

body {
  margin: 10px;
}

form {
  margin: 0px auto;
  width: 370px;
}

p {
  font-family: 'Roboto', sans-serif;
  font-size: 13px/18px;
  font-weight: 300;
  padding: 10px 0px;
  text-align: center;
}

.output {
  color: #000;
  font-family: 'Roboto', sans-serif;
  font-size: 13px/20px;
  font-style: normal;
  font-weight: 100;
  text-align: center;
}

h2 {
  color: #009CDC;
  font-family: 'Roboto', sans-serif;
  font-size: 2.5em;
  font-style: normal;
  font-weight: 100;
  line-height: 1.17em;
  text-align: center;
}

input {
  display: true;
  margin-bottom: 10px;
}

label {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h2>test header</h2>

<p>blahblah.</p>

<form>
  <select id="month" class="form_field">
    <option value="">Select NUMBER</option>
    <option value="1"> 1</option>
    <option value="2"> 2</option>
    <option value="3"> 3</option>
    <option value="4"> 4</option>
    <option value="5">5</option>

  </select>
  <label class="1" for="1">/bookmark1.php?f=</label>
  <label class="2" for="2">/bookmark2.php?f=</label>
  <label class="3" for="3">/bookmark3.php?f=</label>
  <label class="4" for="4">/bookmark4.php?f=</label>
  <label class="5" for="5">/bookmark5.php?f=</label>



  <select id="color" class="form_field">
    <option value="">Select Date</option>
    <option value="6-28-18">6-28-18</option>
    <option value="6-29-18">6-29-18</option>
    <option value="6-30-18">6-30-18</option>
    <option value="7-1-18">7-1-18</option>

  </select>
  <label class="6-28-18" for="6-28-18">062818xdasddA</label>
  <label class="6-29-18" for="6-29-18">062918x31ewqeqwe</label>
  <label class="6-30-18" for="6-30-18">063018x3123233</label>
  <label class="7-1-18" for="7-1-18">070118x23232</label>
  <input id="search" class="form_field" type="text">
  <p id="output"></p>

如何在结果中获取文本表单输出

2 个答案: