使用Jquery创建动态按钮

时间:2017-04-26 12:37:28

标签: php jquery

嘿伙计们我正在尝试从下拉列表中创建一个动态按钮。例如,在下面的 '--------------------------------------------------------- Create Dictionary dctDataDictionary.Add("sourceTktNum", strSourceTktNumKey) dctDataDictionary.Add("incidentTime", strIncidentTime) dctDataDictionary.Add("incidentEndTime", strIncidentEndTime) dctDataDictionary.Add("recordTimeStamp", strRecordTimeStamp) dctDataDictionary.Add("outageReasonCd", strOutageReasonCd) dctDataDictionary.Add("numDS3", strNumDS3) dctDataDictionary.Add("numBlocked", strNumBlocked) dctDataDictionary.Add("numVOIP", strNumVOIP) dctDataDictionary.Add("numWireline", strNumWireline) dctDataDictionary.Add("numEndUserCircuits", strNumEndUserCircuits) dctDataDictionary.Add("stateCd", strStateCd) dctDataDictionary.Add("city", strCity) dctDataDictionary.Add("incidentDescription", strIncidentDescription) dctDataDictionary.Add("causeDesc", strCauseDesc) dctDataDictionary.Add("equipFailedDesc", strEquipFailedDesc) dctDataDictionary.Add("networkPartDesc", strNetworkPartDesc) dctDataDictionary.Add("restoreMethodDesc", strRestoreMethodDesc) Return dctDataDictionary Public Function GetTicketSearch(ByVal SourceTktNum As String) As Object 'GET api/outage/SourceTktNum Dim strFullName As String = MethodBase.GetCurrentMethod().ReflectedType.FullName Dim strMethodName As String = MethodBase.GetCurrentMethod().Name Dim strClassRoutine As String = strMethodName & " / " & strFullName Try Dim dctDataDictionary As Object = GetReportData_bllBLL.BLL__DataSet__GetReportData__GetData(strMARCLSysId, strLogonSysId, SourceTktNum) If dctDataDictionary Is Nothing Then Throw New HttpResponseException(HttpStatusCode.PartialContent) Else Return dctDataDictionary End If Catch ex As Exception Dim strExMessage As String = ex.Message Dim strStackTrace As String = ex.StackTrace Dim strMsg As String = strExMessage & ControlChars.CrLf & ControlChars.Lf & strStackTrace & ControlChars.CrLf & ControlChars.Lf MailLogEvent.BLL__Process__MailAndLogEvent__AddLogEntry(strMARCLSysId, strLogonSysId, 901020, dteTime_Start, 0, strMsg, strClassRoutine) Throw New HttpResponseException(HttpStatusCode.InternalServerError) End Try End Function 代码中......

HTML
function dropdownbutton(){
    var make = document.getElementById("makelist");
    var answer = make.options[make.selectedIndex].value;

    alert("answer")

}

我愿意尝试使用不同的语言,但我更愿意在<div class="make"> <label>Make</label> <select name="make" id="makelist" onchange="getId(this.value);"> <option value="">Select Make</option> <option value="">1</option> </select> </div> <div id="model"> <label>Model</label> <select name="model" id="modellist" onchange="getId2(this.value);"> <option value="">Select Model</option> <option value="">1</option> <option value="">2</option> </select> </div> <div id="year"> <label>Year</label> <select name="year" id="yearlist" onchange="getId3(this.value);"> <option value="">Select Year</option> <option value="">1</option> <option value="">2</option> </select> </div> <button id="dropdownbutton" onclick="dropdownbutton()" class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-rounded vc_btn3-style-3d vc_btn3-color-success">Dropdown</button>中进行尝试,我根本不知道如何从每个下拉列表中获取值。

3 个答案:

答案 0 :(得分:1)

我已经在 dropdownbutton() 功能中接受了 Jquery 的帮助,我调用了所有选择框元素。

使用 .each 函数提取下拉值的值选择值。 我检查这些值是否为空,然后在元素中创建了一个按钮 #append_new_button

请检查以下可能解决问题的代码

谢谢

function dropdownbutton() {
  jQuery('#append_new_button').html('');
  jQuery('select').each(function(){
      var select_value = jQuery(this).val();
      var select_label = jQuery("#"+jQuery(this).attr('id')+" option[value='"+select_value+"']"). text();
      if(select_value != ''){
          jQuery('#append_new_button').append('<input type="button" id="'+select_value+'" value="'+select_label+'"></button>')
      }

  });
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="make">
  <label>Make</label>
  <select name="make" id="makelist">
    <option value="">Select Make</option>
    <option value="make_1">Make 1</option>
    <option value="make_2">Make 2</option>
  </select>
</div>

<div id="model">
  <label>Model</label>
  <select name="model" id="modellist" >
    <option value="">Select Model</option>
    <option value="model_1">Model 1</option>
    <option value="model_2">Model 2</option>
  </select>
</div>

<div id="year">
  <label>Year</label>
  <select name="year" id="yearlist" >
    <option value="">Select Year</option>
    <option value="year_1">year 1</option>
    <option value="year_2">year 2</option>
  </select>
</div>

<button id="dropdownbutton" onclick="dropdownbutton()" class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-rounded vc_btn3-style-3d vc_btn3-color-success">Dropdown</button>

<div id="append_new_button">

</div>

答案 1 :(得分:0)

我更新了该代码以查找每个下拉列表的值

    function dropdownbutton(val){
    var make = document.getElementById("makelist");
    var answer = make.options[make.selectedIndex].value;
    var model = document.getElementById("modellist");
    var answer2 = model.options[model.selectedIndex].value;
    var year = document.getElementById("yearlist");
    var answer3 = year.options[year.selectedIndex].value;

    alert(answer2);
    }

现在我需要弄清楚如何将这些变量传递给链接,例如mydomain.com/answer/answer2/answer3

答案 2 :(得分:0)

我认为这段代码更具动态性。

$("button").click(function() { // if button is clicked

  var arr = $('select').map(function() { // run through all selects and get value
    return this.value
  }).get();

  var url = "http://exp.com"; // base for the url

  arr.forEach(function(item) {
            url = url + '/' + item; // append all options to the base url
        });

  window.location.href(url); // redirect to base url + all options
});

不要忘记为您的选项增加价值。 <option value="1">1</option>

请查看jsfiddle了解工作示例