Question

用户有一个随机下拉列表，他们选择一个值。然后我需要有另一个下拉列表，具体取决于他们选择的值。用户将有一个他们想要执行操作的项目的下拉列表然后我有另一个下拉列表，表明他们想要对他们选择的项目执行什么操作。无论如何使用PHP或javascript我可以动态加载第二个下拉列表的值后，他们从第一个下拉列表中选择一个东西???这是一个最小的例子......这是第一个下拉列表。：

<label for="mydropdown" datalabel="mydropdown">Country:</label>    
<select name="mydropdown">
    <option value="United States">United States</option>
    <option value="Canada">Canada</option>
    <option value="Mexico">Mexico</option>
    <option value="Other">Not Listed</option>
</select>

然后当他们选择一个值时，我试图用他们选择的值进行ajax调用

    $("#select_item_chosen").change(function() {
            var el = $(this);
          console.log(el.val());
            $.ajax({
                type: 'POST',
                url: "dropdownlist",
                data: 'csrf_token=' + $('meta[name=csrf-token-
  value]').attr('content') +'&Selectedcampaign_id=' + el.val(),
                success: function (response) {
                    var jsonResponse = $.parseJSON(response);
                }
            });
        });

然后我需要根据他们的选择加载另一个下拉列表，但我不知道该怎么做...我是否重新加载页面？

以下是我用PHP发回的内容

public function actionDropdownlist (){
        $openListFieldAction = new CampaignOpenActionListField();

        if(isset($_POST['Selectedcampaign_id'])) {
            $postCampaign = $_POST['Selectedcampaign_id'];

            $criteria = new CDbCriteria();
            $criteria->compare('campaign_id', $postCampaign);
            $criteria->compare('customer_id', (int)Yii::app()->customer->getId());
            $ajaxCampaign = Campaign::model()->find($criteria);

            $openListFieldAction->campaign_id = $ajaxCampaign->campaign_id;
            $openListFieldAction->list_id = $ajaxCampaign->list_id;
            $openListFieldActionOptions = $openListFieldAction->getTextFieldsAsDropDownOptions();
            echo json_encode(array("openListFieldActionOptions"=>$openListFieldActionOptions));
        }
    }

当我控制台登录我的jsonreponse时，这是控制台向我显示的内容：

Object {openListFieldActionOptions: Object}
openListFieldActionOptions
:
Object
288880
:
"FOFO"
__proto__
:
Object
constructor
:
function Object()
hasOwnProperty
:
function hasOwnProperty()
isPrototypeOf
:
function isPrototypeOf()
propertyIsEnumerable
:
function propertyIsEnumerable()
toLocaleString
:
function toLocaleString()
toString
:
function toString()
valueOf
:
function valueOf()
__defineGetter__
:
function __defineGetter__()
__defineSetter__
:
function __defineSetter__()
__lookupGetter__
:
function __lookupGetter__()
__lookupSetter__
:
function __lookupSetter__()
get __proto__
:
function __proto__()
set __proto__
:
function __proto__()
__proto__
:
Object
constructor
:
function Object()
hasOwnProperty
:
function hasOwnProperty()
isPrototypeOf
:
function isPrototypeOf()
propertyIsEnumerable
:
function propertyIsEnumerable()
toLocaleString
:
function toLocaleString()
toString
:
function toString()
valueOf
:
function valueOf()
__defineGetter__
:
function __defineGetter__()
__defineSetter__
:
function __defineSetter__()
__lookupGetter__
:
function __lookupGetter__()
__lookupSetter__
:
function __lookupSetter__()
get __proto__
:
function __proto__()
set __proto__
:
function __proto__()

Answer 1

使用你的ajax结果：

 success: function (response) {
    var jsonResponse = $.parseJSON(response);
    //process here
 }

但我不建议这样做，而不是使用es6 transpiler：

$("#select_item_chosen").change(async function() {
   showEl(this);

   let response = await callAjax();

   let jsonResponse = $.parseJSON(response);

   renderDropDown(jsonResponce,$('body'));
}

function callAjax(){
  return $.ajax({});
 }

function showEl(el){
  var el = $(el);
  console.log(el.val());
 }

function renderDropDown(data,target){
  var select = $('<select>');
  data.forEach(x=>{
    var option = $('<option>',{value:x.value});
    option.html(x.text);
    select.append(option);
  });
  target.append(select);
 }

Answer 2

以下是您要完成的一个很好的例子。而且我认为这与您正在寻找的完全一致

Jquery-Value-Dependet-Dropdowns

需要在选择下拉列表后动态加载下拉列表

2 个答案: