javascript - How to use x-init to set 'selected' attribute of dropdown option using AlpineJS - Stack Overflow

admin管理员组

文章数量:1297069

I have a form which is submitted using AlpineJS.

Using x-init I want to default the drop down to a specific country using a two letter string read from a cookie.

How can I use the 2 leter code I get in initForm() to set the selected attribute of the dropdown?

<div x-data="marketingForm()" x-init="initForm()">
  <form id="formID-Contact" name="Contact" data-pageurl="http://localhost:8080/form-test/" class="">
    <div>
      <label for="country" >Country / Region</label>
      <select id="country" name="country" autoplete="country">
        <option value='GB'>United Kingdom</option>
        <option value='US'>United States</option>
        <option value='CA'>Canada</option>
        <option value='MX'>Mexico</option>
      </select>
    </div>
    <a>
      <button @click.prevent=submitMarketingForm() id='formSubmitButton'>submit</button>
    </a>
  </form>
</div>

And the JS

window.marketingForm = () => {
  return {
    detectedCountry: '',
    initForm() {
      let country = getCountry() // function that reads a cookie and returns 2 letter code eg. UK. 
      this.detectedCountry = country // how do I use this to set selected attribute of relevant option
      
    },
    submitMarketingForm(formID) {
      // Do the form submitting stuff
    }
  }
}

So assuming detectedCountry is set to UK I want to end up with:

<select id="country" name="country" autoplete="country">
  <option selected value='GB'>United Kingdom</option>
  <option value='US'>United States</option>
  <option value='CA'>Canada</option>
  <option value='MX'>Mexico</option>
</select>

I have a form which is submitted using AlpineJS.

Using x-init I want to default the drop down to a specific country using a two letter string read from a cookie.

How can I use the 2 leter code I get in initForm() to set the selected attribute of the dropdown?

<div x-data="marketingForm()" x-init="initForm()">
  <form id="formID-Contact" name="Contact" data-pageurl="http://localhost:8080/form-test/" class="">
    <div>
      <label for="country" >Country / Region</label>
      <select id="country" name="country" autoplete="country">
        <option value='GB'>United Kingdom</option>
        <option value='US'>United States</option>
        <option value='CA'>Canada</option>
        <option value='MX'>Mexico</option>
      </select>
    </div>
    <a>
      <button @click.prevent=submitMarketingForm() id='formSubmitButton'>submit</button>
    </a>
  </form>
</div>

And the JS

window.marketingForm = () => {
  return {
    detectedCountry: '',
    initForm() {
      let country = getCountry() // function that reads a cookie and returns 2 letter code eg. UK. 
      this.detectedCountry = country // how do I use this to set selected attribute of relevant option
      
    },
    submitMarketingForm(formID) {
      // Do the form submitting stuff
    }
  }
}

So assuming detectedCountry is set to UK I want to end up with:

<select id="country" name="country" autoplete="country">
  <option selected value='GB'>United Kingdom</option>
  <option value='US'>United States</option>
  <option value='CA'>Canada</option>
  <option value='MX'>Mexico</option>
</select>

• javascript
• alpine.js

Share Improve this question Follow asked Jul 16, 2021 at 13:36 dwknsdwkns 2,45944 gold badges2525 silver badges3535 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

Just bind the selected attribute if the country's key is equal to the detectedCountry. I'd suggest storing the countries in your data object.

<div x-data="marketingForm()" x-init="initForm()">
  <form id="formID-Contact" name="Contact" data-pageurl="http://localhost:8080/form-test/" class="">
    <div>
      <label for="country" >Country / Region</label>
      <select id="country" name="country" autoplete="country">
        <template x-for="country in countries">
          <option 
            :value='country.key'
            :selected="country.key === detectedCountry"
            x-text="country.name"
          >
          </option>
        </template>
      </select>
    </div>
    <a>
      <button @click.prevent=submitMarketingForm() id='formSubmitButton'>submit</button>
    </a>
  </form>
</div>


<script>
const marketingForm = () => {
  return {
    countries: [
      { key: 'GB', name: 'United Kingdom' },
      { key: 'US', name: 'United States' },
      { key: 'CA', name: 'Canada' },
      { key: 'MX', name: 'Mexico' },
    ],
    detectedCountry: '',
    initForm() {
      let country = 'GB' // function that reads a cookie and returns 2 letter code eg. UK. 
      this.detectedCountry = country // how do I use this to set selected attribute of relevant option
      
    },
    submitMarketingForm(formID) {
      // Do the form submitting stuff
    }
  }
}
</script>

If your goal is to literally set the select attribute, follow @NICO's answer. If, however, your goal is to just set the value of the select, you can make your life much easier. There's 2 options:

Option 1: Add an x-ref to the select:

<select x-ref="country-select">

Then, within your Alpine function, you can simply do the following:

this.$refs['country-select'].value = country;

This will set the value of the select to your country, and this will update your select accordingly.

Option 2: Use x-model:

<select x-model="detectedCountry">

This does the same as above, except you'll let Alpine do the magic for you. You won't have to do anything else.

本文标签： javascriptHow to use xinit to set 39selected39 attribute of dropdown option using AlpineJSStack Overflow